javascriptnode.jsreactjsdraftjsdraft-js-plugins

Importing Editor from draft-js-plugins-editor causes TypeErrors on empty project


I've created a new React project in Webstorm. I've installed draft-js and draft-js-plugins-editor, along with the plugins draft-js-hashtag-plugin and draft-js-mathjax-plugin (Using node).

I've following their 'getting started' on their Github, however the example doesn't work for me. As soon as I write

import Editor from 'draft-js-plugins-editor';

I get an TypeError: Cannot read property 'object' of undefined error.

./node_modules/draft-js-plugins-editor/lib/Editor/index.js
node_modules/draft-js-plugins-editor/lib/Editor/index.js:177
174 | }(_react.Component);
175 |
176 | PluginEditor.propTypes = {
    > 177 |   editorState: _react2.default.PropTypes.object.isRequired,
178 |   onChange: _react2.default.PropTypes.func.isRequired,
179 |   plugins: _react2.default.PropTypes.array,
180 |   defaultKeyBindings: _react2.default.PropTypes.bool,

My minimal example code:

import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor'; // Error upon doing this
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import { EditorState } from 'draft-js';

const hashtagPlugin = createHashtagPlugin();

const plugins = [
    hashtagPlugin,
];

export default class MyEditor extends Component {

    state = {
        editorState: EditorState.createEmpty(),
    };

    onChange = (editorState) => {
        this.setState({
            editorState,
        });
    };

    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                onChange={this.onChange}
                plugins={plugins}
            />
        );
    }
}

Solution

  • This error appears because of you use the latest (16th) version of React.js. In this blog post (announce of React.js version 16) you can read:

    The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types...

    All old packages which still accessed React.PropTypes will be broke if you use these with React 16.

    If you want to use draft-js-plugins-editor you must downgrade your react version to version 15. For example, for npm use this command

    npm install react@15.4.2 --save

    or this for yarn:

    yarn add react@15.4.2