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}
/>
);
}
}
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