Importing es6 in create-react-app: wrong URL.

[ghost]

I'm using create-react-app with this.

If I follow this guide: https://www.tiny.cloud/docs/integrations/react/ it works using:

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

in my index.html.

But if I try to use https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/#es2015modules working with Javascript imports it doesn't work anymore.

If I simply use this code as suggested:

import React, { Component } from "react";
import { Editor } from "@tinymce/tinymce-react";
// Import TinyMCE
import tinymce from 'tinymce/tinymce';
// A theme is also required
import 'tinymce/themes/modern/theme';

class App extends React.Component {
  handleEditorChange = (e) => {
    console.log('Content was updated:', e.target.getContent());
  }

  render() {
    return (
      <Editor
        initialValue="<p>This is the initial content of the editor</p>"
        init={{
          plugins: 'link image code',
          toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
        }}
        onChange={this.handleEditorChange}
      />
    );
  }
}

it try to load files from: http://localhost:4000/static/js/skins/lightgray/content.min.css.

But that link doesn't exists on my create-react-app server!

Here a reproduction: https://codesandbox.io/s/q3xzqxllkq

How to fix?

[fyrkant]

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

[frederikhors]

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

[frederikhors]

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

[fyrkant]

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.

[frederikhors]

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"; ?

[fyrkant]

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

[shaysegev]

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'
...

[Gunyon]

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';

[j-shim]

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.