Draft-js: Uncaught Error: Unknown DraftEntity key: ContentState

Created on 25 Sep 2017  路  4Comments  路  Source: facebook/draft-js

I am migrating to v0.10.2 and am getting very strange error inside my decorators strategy. Each strategy calls an external function findEntities which literally does the same thing as suggested in the documentations.

For example, this is one of the decorators I have:

import React from "react";
import { ENTITY_TYPE } from "draft-js-utils";

import { findEntities } from "../utils";

function Link(props) {
    const { entityKey, contentState } = props;

    const { url } = contentState.getEntity(entityKey).getData();
    return (
        <a href={url} target="_blank">{props.children}</a>
    );
}

function findLinkEntities(contentBlock, callback, contentState) {
    findEntities(contentBlock, callback, contentState, ENTITY_TYPE.LINK);
}

export default {
    strategy: findLinkEntities,
    component: Link,
};

And here is the implementation for findEntities.

export const findEntities = (contentBlock, callback, contentState, token) => {
    contentBlock.findEntityRanges((character) => {
        const entityKey = character.getEntity();
        return (
            entityKey && contentState.getEntity(entityKey).getType() === token
        );
    }, callback);
};

However, I am getting the following error:

invariant.js:44 Uncaught Error: Unknown DraftEntity key: ContentState { "entityMap": [object Object], "blockMap": OrderedMap { "f79t0": ContentBlock { "key": "f79t0", "type": "unstyled", "text": "ffff", "characterList": List [ CharacterMetadata { "style": OrderedSet {}, "entity": null }, CharacterMetadata { "style": OrderedSet {}, "entity": null }, CharacterMetadata { "style": OrderedSet {}, "entity": null }, CharacterMetadata { "style": OrderedSet {}, "entity": null } ], "depth": 0, "data": Map {} } }, "selectionBefore": SelectionState { "anchorKey": "f79t0", "anchorOffset": 0, "focusKey": "f79t0", "focusOffset": 0, "isBackward": false, "hasFocus": true }, "selectionAfter": SelectionState { "anchorKey": "f79t0", "anchorOffset": 4, "focusKey": "f79t0", "focusOffset": 4, "isBackward": false, "hasFocus": true } }.
    at invariant (invariant.js:44)
    at Object.__get (DraftEntity.js:166)
    at ContentState.getEntity (ContentState.js:155)
    at eval (utils.js:650)
    at eval (findRangesImmutable.js:31)
    at eval (immutable.js:4420)
    at List.__iterate (immutable.js:2208)
    at List.reduce (immutable.js:4415)
    at findRangesImmutable (findRangesImmutable.js:29)
    at ContentBlock.findEntityRanges (ContentBlock.js:106)

Is there something I am missing? My editor has been using these decorators for a long time and due to the warnings I decided to migrate. After migration, I am getting these errors. Appreciate your help and support.

Thanks
Kevin

Most helpful comment

@kevinguard what was the root cause for you? I'm seeing the same issue.

All 4 comments

Found the root cause.

@kevinguard what was the root cause for you? I'm seeing the same issue.

Found the root cause.

Do you have an explanation for your findings.

@dictions and @bradlocking the problem is that the old createEntity method was returning the entityKey, but the new method is returning the updated contentState. So you need to call const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); to get the entityKey.

Was this page helpful?
0 / 5 - 0 ratings