draft-js-plugins: [Mentions] cannot remove mention with backspace

I had the problem while working on a fork of the project. I had accidently run npm install in a plugin directory. There was two versions of draft-js: one in the root of the project, one in the plugin directory. So when I was creating a new entity in the /doc folder, it was creating an entity in the root draft-js library, and in the plugin it was trying to retrieve it from the local draft-js lib. I just deleted the local node_modules (in the plugin dir) and it worked.

@MarkNijhof,I got this error too.As @theuniverse said ‘the root cause is there are 2 modules of “DraftEntity” in the project’.My project had two modules.I find draft-js in ‘draft-js-mention-plugin/node_modules’ ,so, webpack build draft-js twice in bundle file.

You could update your draft-js as draft-js-mention-plugin use. These are dependencies draft-js-mention-plugin used.

  "dependencies": {
    "decorate-component-with-props": "^1.0.2",
    "draft-js": ">=0.8.1",
    "find-with-regex": "^1.0.2",
    "immutable": ">=3.8.1",
    "lodash.escaperegexp": "^4.1.2",
    "react": ">=15.2.1",
    "react-dom": ">=15.2.1",
    "union-class-names": "^1.0.0"
  },

so, I update draft-js to ‘>=0.8.1’

"dependencies": {
    "antd": "2.0.1",
    "chai-shallow-deep-equal": "^1.4.4",
    "classnames": "2.2.0",
    "deep-equal": "1.0.1",
    "draft-js": ">=0.8.1",
   …
}

I get the same issue with AtomicBlocks, be it image or some other type of embedded media. This is with draft-js@0.10.0 and I don’t have other plugins conflicting dependencies.

invariant.js:44 Uncaught Error: Unknown DraftEntity key.
    at invariant (invariant.js:44)
    at Object.__get (DraftEntity.js:166)
    at ContentState.getEntity (ContentState.js:155)
    at MediaComponent (blockRenderer.jsx:30)
    at StatelessComponent.render (ReactCompositeComponent.js:44)
    at eval (ReactCompositeComponent.js:796)
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:746)

Fixed it here: https://github.com/draft-js-plugins/draft-js-plugins/pull/180

thx again for reporting @Aleksion @alexkuz @nadimtuhin

Ok this is weird, I copied all the files for the editor locally and then it works perfectly, but as soon as I change the reference of the plugin editor to my own fork it fails in this way?

I met the same problem and now started with other guy’s example as workaround. As I tried, the problem is in webpacked resources (bundle.js for me), and only happened with mention-plugin.

As is said above, the error is Uncaught Invariant Violation: Unknown DraftEntity key. But the root cause is there are 2 modules of “DraftEntity” in the project (one as top level module, another as nested module, which I don’t know why 😕 ) So creating and backspacing were jumping into different modules… the second copy (used by backspace) didn’t know you’ve inserted an mention entity in the first one (used by mention-plugin). I will try to reproduce it again later.

Not sure whether it’s the same issue. Thanks anyway! 👍

Can’t reproduce it in sample - the problem might be something in my project. I’m not sure I’ll have enough time to investigate this, so it’s ok to close this issue for now.