Error: TinyMCE is undefined while using with React

[Aniket-IN]

Hi, first of all, thank you for this amazing package.

But I'm not able to get this setup, I'm sure I'm doing something wrong.

I'm using TinyMCE with React. TinyMCE is installed via npm.

I'm adding this plugin like this: 1) Downloaded the dist folder, and placed it inside @/Resources/Plugins/grid/plugin (@ is just my root directory's alias) 2) Imported it to my component where I'm using TinyMCE

import { Editor } from '@tinymce/tinymce-react'; 
import gridPlugin from '@/Plugins/grid/plugin'

<Editor
    apiKey={apiKey}
    initialValue={product?.detailed_description}
    image_uploadtab={true}
    init={{
        external_plugins: {
            'grid': gridPlugin // used it here
        },
        relative_urls : false,
        remove_script_host : false,
        convert_urls : true,
        height: 500,
        toolbar_sticky: true,
        image_caption: true,
        plugins: 'grid | print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor  insertdatetime advlist lists wordcount  textpattern noneditable help charmap quickbars emoticons',
        menubar: 'file edit view insert format tools table help',
        toolbar: 'grid_insert | undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
        toolbar_mode: 'sliding',
        contextmenu: 'link image imagetools table',
        automatic_uploads: true,
        paste_data_images: true,
        images_upload_url: route('tinymce.upload', {'_query': {'_token': csrf_token}}),
    }}
    onChange={handleEditorChange}
/>

Getting this error:

Uncaught (in promise) ReferenceError: tinymce is not defined
    at Object._ (app.js?id=abe0b68e10a4ad4aecf1:21739:7)
    at n (app.js?id=abe0b68e10a4ad4aecf1:21761:16)
    at app.js?id=abe0b68e10a4ad4aecf1:21804:35
    at app.js?id=abe0b68e10a4ad4aecf1:22461:5
    at Object../resources/js/Plugins/grid/plugin.js (app.js?id=abe0b68e10a4ad4aecf1:22462:3)
    at __webpack_require__ (app.js?id=abe0b68e10a4ad4aecf1:190039:42)

Things I tried: 1) Previosuly installed via npm (npm i tinymce-plugin-grid) and imported from node_modules (Same error) 2) I also tried the forked version of this plugin which claimed to support TinyMCE 5, but that didn't work as well (Same error)

[root913]

I'll be honest with you I haven't tested this package with modern frameworks / libraries. Tinymce plugins require global variable "tinymce" in "window" - maybe try doing that and it will work.

Since the begining of writting this plugin I had problems with finding good information how things should be done. If You have suggestions on how to improve or some example / materials feel free to create issue

[root913]

Please checkout example prepared for reactjs: https://github.com/root913/tinymce-plugin-grid/tree/master/examples/reactjs