Search code examples
javascriptnode.jsreactjsdraftjsdraft-js-plugins

DraftJS getBlocksAsArray() returns an array of an array in production but just an array in dev (and works)


I have the following code:

 const sampleMarkup = "<div>Insert Text Here</div>";

    const blocksFromHTML = convertFromHTML(sampleMarkup);
    let builtContentState = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks);
    console.log("builtContentState", builtContentState.getBlocksAsArray());

In my dev environment the console log looks like this:

enter image description here

While in the production environment it looks like this:

enter image description here

Needless to say they look very different and from the same code. Everything in the build works besides this (and it's a fairly large project with lots of moving parts, node modules, etc) so I'm unsure what could be causing this specific issues.

Fundamentally the issue is for the same inputs and results I am getting a different output from getBlocksAsArray();

const sampleMarkup = "<div>Insert Text Here</div>";

const blocksFromHTML = convertFromHTML(sampleMarkup);

let builtContentState = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks);
console.log("builtContentState", builtContentState.getBlocksAsArray());

return <div>{JSON.stringify(builtContentState)}</div>

Where the JSX output shows the same shape of object but getBlocksAsArray() has different outputs (as per the screenshot above)


Solution

  • I found out this was caused by including a newer version of immutablejs in my package.json than what draftjs supported - unsure why this would affect draftjs but looks like in the minification process the getBlocksAsArray() wires were crossed between the internal package in draftjs and the one I had included in my package.json