search

tinymce / tinymce-react

Offical TinyMCE React component
MIT License
937 stars 152 forks source link

Uncaught ReferenceError: tinymce is not defined #509

Closed northk closed 3 months ago

northk commented 3 months ago

Greetings tinymce-react team,

I keep getting the error Uncaught ReferenceError: tinymce is not defined in the web developer console, and I can't figure out what is wrong. I followed the directions for bundling tinymce-react here, although I'm using yarn: https://www.tiny.cloud/docs/tinymce/7/react-pm-bundle/. I created a BundledTinyMceEditor.tsx and and instantiated an instance of that component in my app as shown in the example app.js. The code all compiles fine, with the exception that I get 'tinyMce' is declared but its value is never read in BundledTinyMceEditor.tsx. And that is correct, the sample code in BundledEditor.js as well as the sample app.js does not directly reference anything in the tinyMce package.

An instance of the TinyMce editor should be instantiated and rendered in my app, but the app will not load and I get the uncaught reference error as described above.

yarn info tinymce-react says the version is 1.3.2, and yarn info tinymce says version 7.0.0.

Please provide some guidance if you can. Thanks.

danoaky-tiny commented 3 months ago

You're using the wrong tinymce-react package. https://www.npmjs.com/package/tinymce-react is not us. This is the correct npm package: https://www.npmjs.com/package/@tinymce/tinymce-react. yarn add @tinymce/tinymce-react

Also, when setup correctly, tinymce is a global variable. So the ref error you're getting, hints at the global not being assigned. But anyway, as a first step, install our package and yarn remove tinymce-react

northk commented 3 months ago

@danoaky-tiny thanks for writing back. I've made sure the correct @tinymce/tinymce-react package is now installed. The package.json says "@tinymce/tinymce-react": "^4.3.2" and "tinymce": "^7.0.0". But, I still get the same problem. Where in the application should the TineMCE editor instance get instantiated? I suspect either that isn't happening, or it's happening in the wrong place. I don't think there is any global tinymce variable. I would appreciate your advice.

danoaky-tiny commented 3 months ago

If you followed the setup steps more or less how they are right now: within BundledTinyMceEditor.tsx, try replacing:

// TinyMCE so the global var exists
// eslint-disable-next-line no-unused-vars
import tinymce from 'tinymce/tinymce';

With this:

import 'tinymce/tinymce';

I noticed you're also using TinyMCE version 7, which will also require a license key. You can read more here https://www.tiny.cloud/docs/tinymce/7/license-key/

northk commented 3 months ago

@danoaky-tiny the import 'tinymce/tinymce'; fixed the problem! I'm not sure how that is different than import tinymce from 'tinymce/tinymce';, but it is. The editor is now rendering and seems to be working. Regarding the license key, it appears that I can do the following to declare that I'm using TinyMCE under the GPL license, in the init property: license_key: 'gpl',

Is there any reason you can think of why this won't work? Now I just need to get image and file uploads configured and working. Thanks again.

danoaky-tiny commented 3 months ago

No worries, glad to have helped.

As for why the named import of TinyMCE didn't work for you, it's hard to say without seeing your bundler, bundler config, etc. My guess is it could be that your bundler is removing that line as it thinks it's dead code, as in tinymce isn't directly used in that file.

And using 'gpl' just means you're agreeing to self host TinyMCE under the GPL license, and yes you can do that, if that's the case for you. https://www.tiny.cloud/docs/tinymce/7/license-key/#use-tinymce-with-the-gplv2-license