Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught Error: Cannot unlock an object that was not locked before - With Vite #248

Open
andreibrindas opened this issue Dec 5, 2023 · 17 comments

Comments

@andreibrindas
Copy link

andreibrindas commented Dec 5, 2023

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:31

Is 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!

@johngodley
Copy link
Member

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

@andreibrindas
Copy link
Author

andreibrindas commented Dec 5, 2023

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

@johngodley
Copy link
Member

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.

@andreibrindas
Copy link
Author

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

@andreibrindas
Copy link
Author

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!

@johngodley
Copy link
Member

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.

@crs1138
Copy link

crs1138 commented Apr 10, 2024

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

@johngodley
Copy link
Member

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

@crs1138
Copy link

crs1138 commented Apr 10, 2024

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.

image

@johngodley
Copy link
Member

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?

@crs1138
Copy link

crs1138 commented Apr 10, 2024

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.

image

@johngodley
Copy link
Member

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?

@eddhurst
Copy link

eddhurst commented Apr 12, 2024

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?

@kristianoye
Copy link

kristianoye commented Jul 10, 2024

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

image

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:

image

@kristianoye
Copy link

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:

  • node_modules/@wordpress/patterns/node_modules
  • node_modules/@wordpress/preferences/node_modules
  • node_modules/@wordpress/widgets/node_modules

After I recompiled my bundle, the editor tried to start...

image

But I am now presented with a new set of errors to work through.

index.js:11
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
pattern-overrides.js:44
Uncaught
TypeError: useSetPatternBindings is not a function
at BindingUpdater (pattern-overrides.js:44:1)
at renderWithHooks (react-dom.development.js:15486:1)
at mountIndeterminateComponent (react-dom.development.js:20103:1)
at beginWork (react-dom.development.js:21626:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27490:1)
at performUnitOfWork (react-dom.development.js:26596:1)
at workLoopSync (react-dom.development.js:26505:1)
react-dom.development.js:18704
The above error occurred in the component:

at BindingUpdater (http://localhost:8080/js/bundle.js:218626:79)
at http://localhost:8080/js/bundle.js:218616:89
at FilteredComponentRenderer (http://localhost:8080/js/bundle.js:167767:9)
at EditWithGeneratedProps (http://localhost:8080/js/bundle.js:11169:5)
at BlockEdit (http://localhost:8080/js/bundle.js:11242:3)
at BlockCrashBoundary (http://localhost:8080/js/bundle.js:12149:5)
at BlockListBlock (http://localhost:8080/js/bundle.js:12512:10)
at http://localhost:8080/js/bundle.js:60363:59
at http://localhost:8080/js/bundle.js:62933:98
at FilteredComponentRenderer (http://localhost:8080/js/bundle.js:167767:9)
at http://localhost:8080/js/bundle.js:197313:82
at BlockListBlockProvider (http://localhost:8080/js/bundle.js:12819:5)
at Items (http://localhost:8080/js/bundle.js:13212:3)
at BlockListItems
at div
at Root (http://localhost:8080/js/bundle.js:13111:3)
at BlockList
at div
at ObserveTyping (http://localhost:8080/js/bundle.js:46301:3)
at div
at WritingFlow (http://localhost:8080/js/bundle.js:54694:3)
at div
at BlockTools (http://localhost:8080/js/bundle.js:20863:3)
at div
at BlockRefsProvider (http://localhost:8080/js/bundle.js:46480:3)
at Provider (http://localhost:8080/js/bundle.js:177215:3)
at http://localhost:8080/js/bundle.js:46539:5
at http://localhost:8080/js/bundle.js:46890:5
at WithRegistryProvider(Component)
at BlockEditorProvider (http://localhost:8080/js/bundle.js:46566:12)
at div
at BlockEditor (http://localhost:8080/js/bundle.js:421581:24)
at div
at NavigableRegion (http://localhost:8080/js/bundle.js:234882:3)
at div
at div
at div
at InterfaceSkeleton (http://localhost:8080/js/bundle.js:234779:3)
at SlotFillProvider (http://localhost:8080/js/bundle.js:176844:3)
at SlotFillProvider (http://localhost:8080/js/bundle.js:177357:3)
at Provider (http://localhost:8080/js/bundle.js:177215:3)
at div
at ShortcutProvider (http://localhost:8080/js/bundle.js:235619:78)
at Editor (http://localhost:8080/js/bundle.js:421797:23)

React will try to recreate this component tree from scratch using the error boundary you provided, BlockCrashBoundary.
index.js:32

OPTIONS http://localhost:8080/wp/v2/media?_locale=user 404 (Not Found)
defaultFetchHandler @ index.js:104
fetchAllMiddleware @ fetch-all-middleware.js:81
(anonymous) @ index.js:152
httpV1Middleware @ http-v1.js:41
(anonymous) @ index.js:152
namespaceAndEndpointMiddleware @ namespace-endpoint.js:18
(anonymous) @ index.js:152
userLocaleMiddleware @ user-locale.js:20
(anonymous) @ index.js:152
apiFetch @ index.js:154
(anonymous) @ resolvers.js:316
(anonymous) @ thunk-middleware.js:4
(anonymous) @ index.js:24
(anonymous) @ promise-middleware.js:19
(anonymous) @ resolvers-cache-middleware.js:40
(anonymous) @ index.js:500
setTimeout (async)
fulfillSelector @ index.js:494
selectorResolver @ index.js:510
(anonymous) @ index.js:32
(anonymous) @ index.js:136
__unstableMarkListeningStores @ registry.js:118
(anonymous) @ registry.js:193
updateValue @ index.js:136
(anonymous) @ index.js:177
useMappingSelect @ index.js:202
useSelect @ index.js:286
BlockEditor @ index.js:31
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20103
beginWork @ react-dom.development.js:21626
beginWork$1 @ react-dom.development.js:27465
performUnitOfWork @ react-dom.development.js:26596
workLoopSync @ react-dom.development.js:26505
renderRootSync @ react-dom.development.js:26473
performSyncWorkOnRoot @ react-dom.development.js:26124
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26240
legacyCreateRootFromDOMContainer @ react-dom.development.js:29614
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29640
render @ react-dom.development.js:29731
(anonymous) @ index.js:11
Show less

@donjajo
Copy link

donjajo commented Oct 14, 2024

@kristianoye I downgraded to 2.28.0 to fix the TypeError: useSetPatternBindings is not a function
Sadly, this is not getting enough support and contribution. I could contribute after knowing my ways around it.

@wolfv
Copy link

wolfv commented Oct 20, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants