Open alex-corrado opened 5 months ago
Did you ever figure out the issue with this? It happens to me sporadically
Getting this as well.
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"
}
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", },
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: https://github.com/Automattic/isolated-block-editor/issues/248
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/private-apis@0.40.0 --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
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" } }
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 (
};
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?