10up
Installing latest "10up/block-components" in a new project breaks the block when a ContentPicker component is used in the block
Describe the bug
On a new project, if I install 10up/block-components and use the ContentPicker component in one of my blocks, the block breaks whenever the ContentPicker component needs to render, with the following errors:
Uncaught TypeError: Cannot read properties of undefined (reading 'A')
at getOwner (react-jsx-runtime.development.js:348:1)
at jsxDEVImpl (react-jsx-runtime.development.js:523:1)
at __webpack_modules__../node_modules/react/cjs/react-jsx-runtime.development.js.exports.jsx (react-jsx-runtime.development.js:651:1)
at QueryClientProvider (QueryClientProvider.cjs:64:1)
at renderWithHooks (react-dom.development.js:15486:18)
at mountIndeterminateComponent (react-dom.development.js:20098:13)
at beginWork (react-dom.development.js:21621:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
The above error occurred in the <QueryClientProvider> component:
It seems that the problem is with the @tanstack/react-query dependency that 10up/block-components ("@tanstack/react-query": "^5.40.1"). When the package is installed on a new project, the version of the installed dependency is 5.62.2. The last version of the dependency that is not producing errors is 5.52.0.
Steps to Reproduce
Create a new project, install 10up/block-components and build a block using the ContentPicker component.
Screenshots, screen recording, code snippet
No response
Environment information
No response
WordPress information
No response
Code of Conduct
- [x] I agree to follow this project's Code of Conduct
Hey @kmgalanakis-sage 👋
After investigating this issue we believe this is a bundling issue with NPM Workspaces and 10up Toolkit. By chance is the @10up/block-components package installed in the root package.json and the individual packages (theme, plugin, etc.)?
The block components package cannot be installed in the root of the workspace. It can only be installed in the individual packages.
Hello @fabiankaegy
As far as I can see the @10up/block-components package is just installed in the plugin and not in the root package.json.
Thank you
The issue at the end here ended up being related to peer dependencies of react. So now block components defined which react version it needs.