Uncaught Error: Cannot unlock an object that was not locked before - with ASP.Net MVC

[alex-corrado]

I am integrating Isolated Block Editor to my Asp.Net MVC application through React JS. I am getting the error:

Uncaught Error: Cannot unlock an object that was not locked before at unlock (implementation.js:141:1)

Dependencies information:

"dependencies": {
"babel-preset-env": "^1.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@automattic/isolated-block-editor": "^2.28.0",
"@wordpress/dependency-extraction-webpack-plugin": "^4.30.0",
"webpack": "^5.89.0",
}

Editor.js:
import React from 'react';
import '@automattic/isolated-block-editor/build-browser/core.css';
import IsolatedBlockEditor from '@automattic/isolated-block-editor';

const settings = {
iso: {
moreMenu: false,
},
};

const Editor = () => {
return (

<IsolatedBlockEditor
settings={settings}
onLoad={(parser, rawHandler) => {
console.log('parser: ', parser)
console.log('rawHandler: ', rawHandler)
}}
onSaveContent={(content) => {
console.log('onContentSave')
}}
onError={() => {
console.log('error')
}}
>

);
};

export default Editor;

index.js:
import React from 'react';
import { createRoot } from 'react-dom/client';
import Editor from './Editor';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
//Render Editor here
);

Can you please tell me what I am missing?

[wpuipress]

Did you ever figure out the issue with this? It happens to me sporadically

[arizanovj]

Getting this as well.

[eddhurst]

Same. On a vanilla Vitejs react application, just threw it in to test how this worked but got the same error:

implementation.js:189  Uncaught Error: Cannot unlock an object that was not locked before. 
    at unlock (implementation.js:189:9)
    at index.js:31:31

  "dependencies": {
    "@automattic/isolated-block-editor": "^2.29.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "sass": "^1.75.0",
    "vite": "^5.2.0"
  }

[wpuipress]

I managed to fix this on my setup by adding overrides to my package.json and fixing the react version:

"overrides": {
"react": "18.2.0",
},

[eddhurst]

What version of isolated-block-editor did you have @wpuipress ? I got npm ERR! code EOVERRIDE npm ERR! Override for react@^18.2.0 conflicts with direct dependency

Also cross linking to similar for people like me who don't look properly: #248

[leapxdco]

The issue seems to arise when there are multiple instances of @wordpress/private-apis in the dependency tree. Since the various @wordpress/* packages use a Javascript Symbol to keep track of locked objects, if the Symbol is not one and the same throughout the project, it will not be able to keep track of locked packages.

An easy way to check for this is to look for node_modules/@wordpress/blocks/node_modules. This folder should probably not exist, but if it does, it should not contain a @wordpress/private-apis package. Nb. the issue is not limited to the @wordpress/blocks package. I'm just providing this as an example.

The root cause seems to be a version mismatch between dependencies. When I looked in the sub packages, each instance of the @wordpress/private-apis package was version 0.40.0, but when I installed @wordpress/private-apis via npm install @wordpress/private-apis --save in the main package the installed version was 0.38.0. When I deleted the main node_modules folder and installed the specific version with npm install @wordpress/[email protected] --save, I no longer had separate @wordpress/private-apis packages installed in the sub-package folders, and the issue was resolved.

Full disclosure:
I have not tried using isolated-block-editor myself, I actually encountered this issue on a similar project of my own which makes use of the @wordpress/* packages.
I noticed that this package itself, does not make use of @wordpress/private-apis in its package.json directly, so the solution is probably to add an override section to your main package.json

[loopmasta]

Same here. I am trying to get the isolated-block-editor to work in a simple React App. It compiles fine with the package.json below but throws an 'Error: Cannot unlock an object that was not locked before.' when i open it up in a browser. Every help is greatly appreciated.

{
"name": "blockfactory-iso",
"version": "0.1.0",
"private": true,
"dependencies": {
"@automattic/isolated-block-editor": "^2.29.0",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@wordpress/block-editor": "^13.3.0",
"@wordpress/blocks": "^13.3.0",
"@wordpress/components": "^28.3.0",
"@wordpress/data": "^10.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^4.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"sass": "^1.77.7"
}
}

[kristianoye]

I was having this issue as well. The solution I came up with was to alias the @WordPress namespace in my webpack config:

resolve: { alias: { '@wordpress': path.resolve(__dirname, 'node_modules/@wordpress') } },

This ensured I only had ONE version of private-apis and all the other @WordPress libraries in my bundle (like 2500 fewer modules).