Importing es6 in create-react-app: wrong URL. about tinymce-react HOT 9 CLOSED

For TinyMCE 5+ there's no need to include the skin url to include the css. You can import them all in your component:

// Import TinyMCE and theme
import 'tinymce'
import 'tinymce/themes/silver' // was changed from modern to silver

// Import skin
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'

// Import plugins
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
...

from tinymce-react.

I'm getting this error:

Refused to apply style from 'URL/static/js/skins/ui/oxide/skin.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to apply style from 'URL/static/js/skins/ui/oxide/content.inline.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Also need to import icons:
import 'tinymce/icons/default';

from tinymce-react.

You have to copy the skin and set the skin_url in the init config.

from tinymce-react.

I think this is not a good way to go. skin_url and theme_url are wrong for this case.

from tinymce-react.

I think this question is related to this: tinymce/tinymce#2836

from tinymce-react.

No I'm pretty sure it's the skin that is missing, I tried setting up a new create-react-app, installed tinymce and @tinymce/tinymce-react and copied over the skin with:

cp -r node_modules/tinymce/skins public

Then edited the App.js file to look like this:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import 'tinymce';
import 'tinymce/themes/modern';

import { Editor } from '@tinymce/tinymce-react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Editor 
          init={{
            skin_url: process.env.PUBLIC_URL + '/skins/lightgray'
          }}
        />
      </div>
    );
  }
}

export default App;

And it works.

from tinymce-react.

It works. Thanks a lot.

But now I'm wondering if there is a way to "auto-update" those files on every tinymce update. Is there a way to indicate to create-react-app to copy them?

Or can I import them into my component without using skin_url, just using something like: import from "tinymce/skinks/lightgray"; ?

from tinymce-react.

No you have to do that manually, I'd recommend using Tinymce Cloud if you want an auto updating experience!

from tinymce-react.

In my case, this is how I fixed it:

After adding these lines to index.tsx,

// Import TinyMCE
import 'tinymce';

// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default';

// A theme is also required
import 'tinymce/themes/silver';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/anchor';
// ... more plugins

I got this message from the console:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/static/js/skins/ui/oxide/skin.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/static/js/skins/ui/oxide/content.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/static/js/skins/content/default/content.css".

Then I created a new directory and copied the skins folder:

mkdir -p public/static/js
cp -r node_modules/tinymce/skins public/static/js

Finally, restarting dev server with npm start removed the messages. Hope this could be a help for someone in the future.

from tinymce-react.