Uncaught Error: Cannot unlock an object that was not locked before - With Vite about isolated-block-editor HOT 15 OPEN

You are using the wrong version of Gutenberg. Only the version specified here (16.9.0), or the versions in package.json, will work.

from isolated-block-editor.

Thanks a lot for the swift response.

Hmm, where can I see the version of Gutenberg I'm using?
I've installed this package with this command npm i @automattic/isolated-block-editor, but I don't see a Gutenberg version set in package-lock file.

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

from isolated-block-editor.

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.

from isolated-block-editor.

I would like to use the bundled version (if I understand correctly, that's the one that doesn't require PHP)

from isolated-block-editor.

Then I guess, my question is: how can I use the bundled version? Do I need to install Gutenberg in my project?
Or do I have to build this repo and then import in my project?

Thanks!

from isolated-block-editor.

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.

from isolated-block-editor.

@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.

from isolated-block-editor.

@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.

from isolated-block-editor.

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.

from isolated-block-editor.

a working example that would allow us to integrate the isolated block editor as a package with a JS framework like React

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?

from isolated-block-editor.

I guess what I find confusing and not relating to my use-case is the textarea replacement part. Attaching and detaching of the block-editor. This does not apply to a use-case of someone who already has a React application and wants to add the block editor. What do you need the createRoot() for? And do I really need it?

EDIT: Also the part with window.wp – that is just for an instance with Wordpress running, but that's not the case in a React app.

from isolated-block-editor.

Attaching and detaching of the block-editor. This does not apply to a use-case of someone who already has a React application and wants to add the block editor

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.

What do you need the createRoot()

That is from React (https://react.dev/reference/react-dom/client/createRoot#createroot)

And do I really need it?

I don't know how you would make a React app without it.

Also the part with window.wp – that is just for an instance with Wordpress running, but that's not the case in a React app.

It's part of Gutenberg and the DependencyExtractionWebpackPlugin that is described in the readme. It's use is dependant on your situation, and not related to whether you are using React or WordPress.

If you have other questions can you put them in another issue so the people here don't get spammed by them?

from isolated-block-editor.

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.

To clarify, Gutenberg under the hood is actually @wordpress/block-editor?

I believe that OP and I are having the same issue.

Reproduction:

• New vanilla Vite app,
• install @automattic/isolated-block-editor
• Add an IsolatedBlockEditor component into the App.jsx render path.

[email protected] /Users/eddhurst/development/myPackageName
└─┬ @automattic/[email protected]
  ├── @wordpress/[email protected]
  ├─┬ @wordpress/[email protected]
  │ ├── @wordpress/[email protected] deduped
  │ └─┬ @wordpress/[email protected]
  │   ├── @wordpress/[email protected]
  │   └─┬ @wordpress/[email protected]
  │     └── @wordpress/[email protected] deduped
  ├─┬ @wordpress/[email protected]
  │ └── @wordpress/[email protected] deduped
  ├─┬ @wordpress/[email protected]
  │ ├── @wordpress/[email protected] deduped
  │ ├─┬ @wordpress/[email protected]
  │ │ └── @wordpress/[email protected] deduped
  │ └─┬ @wordpress/[email protected]
  │   ├── @wordpress/[email protected]
  │   └─┬ @wordpress/[email protected]
  │     └── @wordpress/[email protected] deduped
  ├─┬ @wordpress/[email protected]
  │ └── @wordpress/[email protected] deduped
  ├─┬ @wordpress/[email protected]
  │ └── @wordpress/[email protected] deduped
  └─┬ @wordpress/[email protected]
    └── @wordpress/[email protected] deduped

Package deps

"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'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?

from isolated-block-editor.