tinymce uncaught TypeError: Theme is not a constructor(…)

javascript reactjs tinymce tinymce-4

10,005

It's an issue with directory structure tinymce. As per issue It does not support the webpack.

Here's the solution on github issues.

You need tinymce and a couple of loaders for webpack.

npm i --save tinymce
npm i --save-dev imports-loader exports-loader

Webpack config

const config = {
  module: {
    loaders: [
      {
        test: require.resolve('tinymce/tinymce'),
        loaders: [
          'imports?this=>window',
          'exports?window.tinymce'
        ]
      },
      {
        test: /tinymce\/(themes|plugins)\//,
        loaders: [
          'imports?this=>window'
        ]
      }    
    ]
  }
}

Implementation in a file

// Core - these two are required :-)
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'

// Plugins
import 'tinymce/plugins/paste/plugin'
import 'tinymce/plugins/link/plugin'
import 'tinymce/plugins/autoresize/plugin'

// Initialize
tinymce.init({
  selector: '#tinymce',
  skin: false,
  plugins: ['paste', 'link', 'autoresize']
})

10,005

Author by

Anurag Jain

😎5.5+ years experience in frontend and backend technologies such as React, Redux, Javascript, Nunjucks, SASS, Webpack, ES6, EsLint, NodeJs, Express, MongoDB, REST API, etc. 💪Strong Javascript Development Experience with Universal, Single Page and Progressive Web Application, React/Redux and one-way data binding. 🔥2+ years of startup experience in Product development and Search Engine Optimization include Agile methodologies Scrum and Sprint, Google Webmaster and Google Analytics. 😍Continuously working in all major stages of the product including idea picking, business & competitors analysis, and product development. ✌️Always keen on exploring & learning trending technologies which makes life easy. SPECIALTIES: Product Development, 📈Search Engine Optimization (SEO), React/Redux/JavaScript, MERN Stack.

Updated on June 04, 2022

Comments

Anurag Jain almost 2 years

My following react component show following error with tinymce and did not mount in dom.

theme.js:1 Uncaught SyntaxError: Unexpected token <

tinymce.js:38447 Uncaught TypeError: Theme is not a constructor(…)

import React from "react";
import tinymce from "tinymce";

const ParagraphDetails = React.createClass({
    componentWillMount(){
        tinymce.init({
            selector: ".tinymce-editor",
            themes: "modern",
        })
    },
    render(){
        return <div>
            <label>About
                <textarea rows="3" className="tinymce-editor"></textarea>
            </label>
        </div>
    }
});

What is going wrong?

Anurag Jain over 7 years

it's only a problem with tinymce, rather it working exactly the way i want. I used webpack and babel loader presets: 'es2015', "react", "stage-1"
Anurag Jain over 7 years

All things working right except tinymce. I also try with componentDidMount but it gives same error in console.
Vikramaditya over 7 years

have you put tinymce.js file in your main index.html file inside head ? because react-tinymce depends on tinymce.js,
Prasanna over 6 years

Can you suggest me the same for angularjs
Karol over 6 years

So this answer is accepted, but wasn't upvoted... I don't get it really... Solution works for JS files. Worth adding that we should use skin: false and load CSS manually.