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

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?

[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’;

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