Draft-js: Uncaught Error: Unknown DraftEntity key.

[mezod]

Hello, I have an app with several instances of draft-js where the following code works, except for one where I get the

Uncaught Error: Unknown DraftEntity key..

I have:

const entityKey = Entity.create('separator', 'IMMUTABLE', {});
    this.props.setEditorState(
      AtomicBlockUtils.insertAtomicBlock(
        this.props.getEditorState(),
        entityKey,
        '-'
      )
    );

I have tried, with the same result:

const editorState = this.props.getEditorState();
    const contentState = editorState.getCurrentContent();
    const entityKey = contentState.createEntity('separator', 'IMMUTABLE', {});
    this.props.setEditorState(
      AtomicBlockUtils.insertAtomicBlock(
        this.props.getEditorState(),
        entityKey,
        '-'
      )
    );

1. I have checked that I only have one copy of draft-js in my npm list of packages.
2. This is completely unrelated to the use of backspaces. (Other issues with the same error talked about this)
3. I have tried adding a whitespace ' ' in the key as suggested in other issues, with no luck.

I am not really sure of what does the error mean nor how to debug it so any help is greatly appreciated!

PS: Again, the code works smoothly for the other several instances of draft-js. I can't really see any differences since I call MyEditor.jsx in the same manner.

FULL STACK TRACE

Uncaught Error: Unknown DraftEntity key.
at invariant (bundle.js:10279)
at Object.__get (bundle.js:68045)
at ContentState.getEntity (bundle.js:67837)
at bundle.js:81802
at findRangesImmutable (bundle.js:65705)
at ContentBlock.findEntityRanges (bundle.js:65647)
at findLinkEntities (bundle.js:81800)
at bundle.js:68912
at Array.forEach ()
at CompositeDraftDecorator.getDecorations (bundle.js:68900)
invariant @ bundle.js:10279
__get @ bundle.js:68045
getEntity @ bundle.js:67837
(anonymous) @ bundle.js:81802
findRangesImmutable @ bundle.js:65705
findEntityRanges @ bundle.js:65647
findLinkEntities @ bundle.js:81800
(anonymous) @ bundle.js:68912
getDecorations @ bundle.js:68900
generate @ bundle.js:84368
(anonymous) @ bundle.js:84216
(anonymous) @ bundle.js:63441
(anonymous) @ bundle.js:63511
(anonymous) @ bundle.js:63257
(anonymous) @ bundle.js:63124
List.__iterate @ bundle.js:62631
OrderedMap.__iterate @ bundle.js:63123
ToKeyedSequence.__iterate @ bundle.js:63255
filterSequence.__iterateUncached @ bundle.js:63508
seqIterate @ bundle.js:61043
Seq.__iterate @ bundle.js:60713
mappedSequence.__iterateUncached @ bundle.js:63440
seqIterate @ bundle.js:61043
Seq.__iterate @ bundle.js:60713
forEach @ bundle.js:64811
(anonymous) @ bundle.js:62386
Map.withMutations @ bundle.js:61778
mergeIntoCollectionWith @ bundle.js:62375
mergeIntoMapWith @ bundle.js:62348
Map.merge @ bundle.js:61729
regenerateTreeForNewBlocks @ bundle.js:84213
(anonymous) @ bundle.js:83846
Map.withMutations @ bundle.js:61778
set @ bundle.js:83816
push @ bundle.js:84087
insertAtomicBlock @ bundle.js:82086
onClick @ bundle.js:91796
(anonymous) @ bundle.js:8631
ReactErrorUtils.invokeGuardedCallback @ bundle.js:15849
executeDispatch @ bundle.js:15634
executeDispatchesInOrder @ bundle.js:15657
executeDispatchesAndRelease @ bundle.js:15313
executeDispatchesAndReleaseTopLevel @ bundle.js:15324
forEachAccumulated @ bundle.js:15948
processEventQueue @ bundle.js:15524
runEventQueueInBatch @ bundle.js:15251
handleTopLevel @ bundle.js:15261
handleTopLevelImpl @ bundle.js:37111
perform @ bundle.js:18775
batchedUpdates @ bundle.js:37029
batchedUpdates @ bundle.js:18232
dispatchEvent @ bundle.js:37186

[mezod]

I deployed the app to have a live demo and the problem doesn't appear in production... hmm feel free to close this!

[flarnie]

Interesting - glad it is not a problem then! :)

[ssehacker]

I meet the same problem.

[mezod]

I never found a solution. It just worked in production, but when I am in development, the issue still occurs :/

[dictions]

I'm seeing this in production :/

[flarnie]

I'll reopen and investigate when I can - thanks for the updates!

[IzaGz]

Hello the problem still occurs on production. What is solution? anyone knows?

[edmondnyaigoti]

Hello i used example specifically on the video part. I noticed the following:

1. adjusting the video controls i.e seek , volume works fine if video itself is not clicked
2. if i adjust duration and volume by * mouse dragging* after clicking on video, it crushes with the error, but doesn't on click

[roundrobin]

contentState.createEntity is not returning an entityKey anymore, instead it returns a contentState.

So you have to get the key via this method:

const contentStateWithEntity =  contentState.createEntity("CUSTOM_TYPE", "IMMUTABLE", {
});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();