instructure-react / react-tinymce

React TinyMCE component
181 stars 115 forks source link

Incompatible with React 16 (crashes at runtime) #82

Open Jessidhia opened 6 years ago

Jessidhia commented 6 years ago

Related: #60 #61 #71 #72 #77

React.PropTypes should be replaced by import PropTypes from 'prop-types', and React.createClass by import createClass from 'create-react-class'.

In case anyone is blocked on this preventing upgrading to React 16, the following webpack config snippet can hack a workaround:

(
  {
    module: {
      rules: [
        {
          // react-tinymce uses APIs removed from React core, rewrite accesses to them
          // with accesses to the modules that provide those APIs
          test: /react-tinymce\/lib\/components\/TinyMCE.js$/,
          enforce: 'pre',
          use: [
            {
              loader: 'imports-loader',
              options: {
                '__import_PropTypes': 'prop-types',
                '__import_createClass': 'create-react-class'
              }
            },
            {
              loader: 'string-replace-loader',
              options: {
                multiple: [{
                  search: String.raw`_react2\['default'\].PropTypes`,
                  replace: '__import_PropTypes',
                  flags: 'g'
                }, {
                  search: String.raw`_react2\['default'\].createClass`,
                  replace: '__import_createClass',
                  flags: 'g'
                }]
              }
            }
          ]
        }
      ]
    }
  }
)
rudovjan commented 6 years ago

Any plan with this?

balmma commented 6 years ago

Or one can use Dominis13/react-tinymce directly from github until this package gets updated: ... "react-tinymce": "git+ss://git@github.com:Dominis13/react-tinymce.git", ...

Probably a bit less cumbersome than the webpack config workaround.

tknuts commented 6 years ago

Having problem deploying the version: Dominis13/react-tinymc UglifyJs complaints on the line: let count = 0; Any timeline for an official release?

rockia commented 6 years ago

@tknuts I had the same issue, then I forked Dominis13's repo and fixed the entry point. Maybe you can use my repo and give it a try https://github.com/rockia/react-tinymce . I also submitted a PR to Dominis13 . Hopefully this workaround works before this official repo got updated.

balmma commented 6 years ago

Oh, I also had to change my require to require "react-tinymce/dist/react-tinymce.js".

But yes, changing the entry point is an even cleaner solution.

tknuts commented 6 years ago

@rockia Your version did the job for me :-) Thanks... will use it until the original one gets up to speed on React 16 👍

grahamb commented 6 years ago

0.7.0 was just published, which should resolve this issue (it's working fine for me with React 16).