Uncaught Error: Cannot unlock an object that was not locked before - With Vite #248
Comments
|
You are using the wrong version of Gutenberg. Only the version specified here (16.9.0), or the versions in package.json, will work. |
|
Thanks a lot for the swift response. Hmm, where can I see the version of Gutenberg I'm using? Edit: I've also tried to use it in a clean new Vite app and a clean new CRA app, still having the same problem |
|
I don't know what version of Gutenberg you are using. It depends how you are bundling it - are you loading Gutenberg yourself externally, or bundling everything together? There is no package-lock.json file as the instructions say to use Yarn. |
|
I would like to use the bundled version (if I understand correctly, that's the one that doesn't require PHP) |
|
Then I guess, my question is: how can I use the bundled version? Do I need to install Gutenberg in my project? Thanks! |
|
Instructions are provided here: https://github.com/Automattic/isolated-block-editor/ If you use the wrong versions of the packages then you will get the above message. You say it works using Webpack so I would suggest using that. If you have problems with Vite then that is something you will need to figure out. |
|
@johngodley one could safely state that the instructions provided there are less than sufficient to answer these questions. How can I get this module working in React? Using NextJS with Vite. I can't even get the simple React component to render. 'use client';
import React from 'react';
import IsolatedBlockEditor from '@automattic/isolated-block-editor/build-module/index';
export default function GbPage() {
return <IsolatedBlockEditor />;
}The issues in this repo are littered by questions like this one and the best you can do is sending people to an incomplete README file? I'd happily lend my hand to submit a PR to improve the documentation but I'd need a bit more to go on to get to understand why is this not working and how to fix it. |
|
@crs1138 I'm sorry it's not of a sufficient standard. However, this is very much an experimental package based on a continually moving target and you will need to adapt things for your own needs without support. This is even more necessary when you are using things for which it has never been tested with (NextJs/Vite). The issue reported here and in other places is one caused by Gutenberg itself, not by this repo. I have tried to explain this, but there is little I can do to make it better. A lot of these questions could be directed to the Gutenberg project itself, and this repo should not be seen as an alternative place to get help. I don't know what issue you are showing above, but your code does not look like the minimum required by the example in the readme. There's also the working example in https://github.com/Automattic/isolated-block-editor/tree/trunk/src/browser where you can look for more details. |
|
Thank you for your speedy answer. Now, I understand a bit better the limitation of the scope of this repo. I see the problem with the examples included in the repo that they are either for browser (html, js, css) or WP plugin. It'd be extremely useful to have a working example that would allow us to integrate the isolated block editor as a package with a JS framework like React. This shouldn't be that difficult as the editor itself is written in React. However, the only information on how to install it as a package/module is extremely short and leaves us hanging with the aforementioned error.
|
The example in the readme and in https://github.com/Automattic/isolated-block-editor/tree/trunk/src/browser are examples of using it with React, and as the entire repo is based on React it's the only way of using it. Do you mean specifically with a build system? |
|
I guess what I find confusing and not relating to my use-case is the EDIT: Also the part with
|
The example is using it replace a textarea with an editor. If you don't need to do that in your app then it's not necessary to do it.
That is from React (https://react.dev/reference/react-dom/client/createRoot#createroot)
I don't know how you would make a React app without it.
It's part of Gutenberg and the If you have other questions can you put them in another issue so the people here don't get spammed by them? |
To clarify, Gutenberg under the hood is actually @wordpress/block-editor? I believe that OP and I are having the same issue. Reproduction:
Package deps I'd also be open to helping open out the documentation a little to provide a bundled react example. The examples currently provided won't work for us as we can't use unpkg internally. Happy to help debug. Outside of that I'm seeing a lot of peer dependency issues with deps looking for react@16 and getting react@18. Hard to say if these are part of the problem, but the examples also use React 18 so I'm guessing that we can overlook those for a minute? |
|
I am experiencing the same issue. I copied/pasted the React code from the "getdave" repo linked to by the official documentation ("Building a custom block editor"). I get the error in: webpack://kristianoye/node_modules/@wordpress/block-library/build-module/block/edit.js 
Has anyone figured out how to fix this? Additional: I am digging around a bit more and found that some odd stuff in my webpack bundle. I found what seems like 3 calls to create the same symbol. The source map for all 3 instances point back to the same location in the pre-webpacked code, but the symbol instances seem to be unique: 
|
|
I figured out a hacky workaround for this particular issue. My webpack bundle included a bunch of nested definitions for the @wordpress/private-apis package. It was getting included by the 'preferences', 'patterns', and 'widgets' dependencies. I ended up completely deleting all the nested node_modules:
After I recompiled my bundle, the editor tried to start... 
But I am now presented with a new set of errors to work through. index.js:11 React will try to recreate this component tree from scratch using the error boundary you provided, BlockCrashBoundary. OPTIONS http://localhost:8080/wp/v2/media?_locale=user 404 (Not Found) |
|
@kristianoye I downgraded to |
|
In NextJS I fixed most problems by using: import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.resolve.alias['@wordpress'] = path.resolve(__dirname, 'node_modules/@wordpress');
return config;
},
};
export default nextConfig;Or if you use webpack, you can use the config directly (#252 (comment)). |
Hey, I have trouble getting this package to work with Vite.
I get this error:
Uncaught Error: Cannot unlock an object that was not locked before. at unlock (implementation.js:185:9) at index.js:25:31Is this because the package is not compatible with Vite (when I ran it on Webpack it was ok)?
Or am I doing something terribly wrong?
Thanks a lot!
The text was updated successfully, but these errors were encountered: