Type Error : Object is being assigned to a read-only property

[camkon]

any idea why this occurs? the code used is

const ChangesComponent = (data) => {
    
    const [diff, setDiff] = useState(null)

    setDiff(differ.diff(data?.old, data?.new))

    const differ = new Differ({
        detectCircular: true,
        maxDepth: Infinity,
        showModifications: true,
        arrayDiffMethod: 'lcs',
    })

    return(
        <Viewer 
            diff={diff}
            indent={2}
            lineNumbers={true}
            highlightInlineDiff={false}
            inlineDiffOptions={{
                mode: 'word',
                wordSeparator: ' ',
            }}
        />
    )
}

This only happens on the second render. Not on first. Also noticed that theres no error if the newValue is just ``. when both old value and new value is added, it crashes.

[RexSkz]

It seems the result (which should be a normal array) is somehow frozen, but there's no such thing as Object.freeze or Object.defineProperty used in both the source code and build result of json-diff-kit.

I guess there may be a bundler plugin or browser extension that can auto-freeze some values, but I'm not confident about it, could you provide a minimal reproducible repo so that I can dig further?