[drag-n-drop-plugin] store.getReadOnly is not a function

We have an editor built with the draft-js-drag-n-drop-plugin and our error monitoring service is reporting a constant stream of this error:

Looking at the drag-n-drop-plugin, this is happening because store.getReadOnly is first defined as undefined, and only assigned a proper function in initialize:

https://github.com/draft-js-plugins/draft-js-plugins/blob/d6182c5a8e029d3e4acba23e69cd277db94856b6/draft-js-drag-n-drop-plugin/src/index.js#L4-L16

Looking at createDecorator.js, it calls store.getReadOnly in the render method but that is throwing an error for some of our users:

https://github.com/draft-js-plugins/draft-js-plugins/blob/d6182c5a8e029d3e4acba23e69cd277db94856b6/draft-js-drag-n-drop-plugin/src/createDecorator.js#L23-L24

So for some reason render is called here before initialize of the main plugin is called. How can that happen? I can submit a patch to introduce a check to createDecorator (store && store.getReadOnly), but is that the right fix or is there something bigger going on?

[elie222]

For anyone else that runs into this problem, I was creating the plugins in the render function. When I added an image to my editor I was updating the state which caused the editor to rerender and the plugins to be recreated.

I fixed this by creating the plugins in the constructor of my component instead.

To help Google index this, the error was coming from the createDecorators function 😃.

[sibelius]

reopen if needed