Bug: useBlocksThemes in custom component breaks blockset command

[traed]

Environment

• @faustwp/core version: 1.2.0
• @faustwp/cli version: 1.2.1
• @faustwp/blocks version: 2.0.0
• @faustwp/block-editor-utils version: 0.0.5
• WordPress version: 6.4.2
• Browser, OS, and other relevant software versions: N/A

Description

When using the useBlocksTheme hook in a custom block the blockset command fails with the following errors:

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 1:2832-2845
Module not found: Error: Can't resolve 'fs' in '/faust-test/faust-test-frontend/node_modules/next/dist/compiled/gzip-size'
@ ./node_modules/next/dist/shared/lib/bloom-filter.js 42:33-77
@ ./node_modules/next/dist/shared/lib/router/router.js 1649:36-69
@ ./node_modules/next/dist/client/router.js 42:57-95
@ ./node_modules/next/router.js 1:0-48
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/nodes/Edit.js 2:0-43 7:40-49
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/Toolbar.js 17:0-39 40:47-51
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/index.js 1:0-39 1:0-39
@ ./node_modules/@faustwp/core/dist/mjs/index.js 19:0-134 21:0-482 21:0-482 21:0-482 21:0-482 21:0-482
@ ./node_modules/@faustwp/blocks/dist/mjs/resolveBlockTemplate.js 1:0-38 31:12-30 43:11-29
@ ./node_modules/@faustwp/blocks/dist/mjs/components/WordPressBlocksViewer.js 2:0-62 19:30-50
@ ./node_modules/@faustwp/blocks/dist/mjs/index.js 2:0-79 6:0-160
@ ./wp-blocks/TestBlock/TestBlock.js 3:0-60 5:16-30
@ ./wp-blocks/TestBlock/index.js 3:0-36 7:19-28

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 1:2878-2895
Module not found: Error: Can't resolve 'stream' in '/faust-test/faust-test-frontend/node_modules/next/dist/compiled/gzip-size'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
@ ./node_modules/next/dist/shared/lib/bloom-filter.js 42:33-77
@ ./node_modules/next/dist/shared/lib/router/router.js 1649:36-69
@ ./node_modules/next/dist/client/router.js 42:57-95
@ ./node_modules/next/router.js 1:0-48
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/nodes/Edit.js 2:0-43 7:40-49
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/Toolbar.js 17:0-39 40:47-51
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/index.js 1:0-39 1:0-39
@ ./node_modules/@faustwp/core/dist/mjs/index.js 19:0-134 21:0-482 21:0-482 21:0-482 21:0-482 21:0-482
@ ./node_modules/@faustwp/blocks/dist/mjs/resolveBlockTemplate.js 1:0-38 31:12-30 43:11-29
@ ./node_modules/@faustwp/blocks/dist/mjs/components/WordPressBlocksViewer.js 2:0-62 19:30-50
@ ./node_modules/@faustwp/blocks/dist/mjs/index.js 2:0-79 6:0-160
@ ./wp-blocks/TestBlock/TestBlock.js 3:0-60 5:16-30
@ ./wp-blocks/TestBlock/index.js 3:0-36 7:19-28

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 1:2928-2943
Module not found: Error: Can't resolve 'zlib' in '/faust-test/faust-test-frontend/node_modules/next/dist/compiled/gzip-size'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
@ ./node_modules/next/dist/shared/lib/bloom-filter.js 42:33-77
@ ./node_modules/next/dist/shared/lib/router/router.js 1649:36-69
@ ./node_modules/next/dist/client/router.js 42:57-95
@ ./node_modules/next/router.js 1:0-48
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/nodes/Edit.js 2:0-43 7:40-49
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/Toolbar.js 17:0-39 40:47-51
@ ./node_modules/@faustwp/core/dist/mjs/components/Toolbar/index.js 1:0-39 1:0-39
@ ./node_modules/@faustwp/core/dist/mjs/index.js 19:0-134 21:0-482 21:0-482 21:0-482 21:0-482 21:0-482
@ ./node_modules/@faustwp/blocks/dist/mjs/resolveBlockTemplate.js 1:0-38 31:12-30 43:11-29
@ ./node_modules/@faustwp/blocks/dist/mjs/components/WordPressBlocksViewer.js 2:0-62 19:30-50
@ ./node_modules/@faustwp/blocks/dist/mjs/index.js 2:0-79 6:0-160
@ ./wp-blocks/TestBlock/TestBlock.js 3:0-60 5:16-30
@ ./wp-blocks/TestBlock/index.js 3:0-36 7:19-28

ERROR in ./node_modules/next/dist/compiled/micromatch/index.js 22:3436-3451
Module not found: Error: Can't resolve 'path' in '/faust-test/faust-test-frontend/node_modules/next/dist/compiled/micromatch'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/next/dist/shared/lib/match-remote-pattern.js 23:20-60
@ ./node_modules/next/dist/shared/lib/image-loader.js 39:37-70
@ ./node_modules/next/dist/shared/lib/image-external.js 27:62-106
@ ./node_modules/next/image.js 1:0-60
@ ./node_modules/@faustwp/blocks/dist/mjs/blocks/CoreImage.js 2:0-34 39:28-33
@ ./node_modules/@faustwp/blocks/dist/mjs/blocks/index.js 9:0-43 19:15-24
@ ./node_modules/@faustwp/blocks/dist/mjs/index.js 5:0-43 6:0-160
@ ./wp-blocks/TestBlock/TestBlock.js 3:0-60 5:16-30
@ ./wp-blocks/TestBlock/index.js 3:0-36 7:19-28

ERROR in ./node_modules/next/dist/compiled/micromatch/index.js 22:3471-3486
Module not found: Error: Can't resolve 'util' in '/faust-test/faust-test-frontend/node_modules/next/dist/compiled/micromatch'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
@ ./node_modules/next/dist/shared/lib/match-remote-pattern.js 23:20-60
@ ./node_modules/next/dist/shared/lib/image-loader.js 39:37-70
@ ./node_modules/next/dist/shared/lib/image-external.js 27:62-106
@ ./node_modules/next/image.js 1:0-60
@ ./node_modules/@faustwp/blocks/dist/mjs/blocks/CoreImage.js 2:0-34 39:28-33
@ ./node_modules/@faustwp/blocks/dist/mjs/blocks/index.js 9:0-43 19:15-24
@ ./node_modules/@faustwp/blocks/dist/mjs/index.js 5:0-43 6:0-160
@ ./wp-blocks/TestBlock/TestBlock.js 3:0-60 5:16-30
@ ./wp-blocks/TestBlock/index.js 3:0-36 7:19-28

ERROR in ./node_modules/@faustwp/core/dist/mjs/client.js 6:0-57
Module not found: Error: Can't resolve '@apollo/client/link/context' in '/faust-test/faust-test-frontend/node_modules/@faustwp/core/dist/mjs'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@apollo/client/link/context' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
@ ./node_modules/@faustwp/core/dist/mjs/index.js 13:0-84 21:0-482 21:0-482 21:0-482
@ ./node_modules/@faustwp/blocks/dist/mjs/resolveBlockTemplate.js 1:0-38 31:12-30 43:11-29
@ ./node_modules/@faustwp/blocks/dist/mjs/components/WordPressBlocksViewer.js 2:0-62 19:30-50
@ ./node_modules/@faustwp/blocks/dist/mjs/index.js 2:0-79 6:0-160
@ ./wp-blocks/TestBlock/TestBlock.js 3:0-60 5:16-30
@ ./wp-blocks/TestBlock/index.js 3:0-36 7:19-28

ERROR in ./node_modules/@faustwp/core/dist/mjs/client.js 8:0-81
Module not found: Error: Can't resolve '@apollo/client/link/persisted-queries' in '/faust-test/faust-test-frontend/node_modules/@faustwp/core/dist/mjs'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@apollo/client/link/persisted-queries' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
@ ./node_modules/@faustwp/core/dist/mjs/index.js 13:0-84 21:0-482 21:0-482 21:0-482
@ ./node_modules/@faustwp/blocks/dist/mjs/resolveBlockTemplate.js 1:0-38 31:12-30 43:11-29
@ ./node_modules/@faustwp/blocks/dist/mjs/components/WordPressBlocksViewer.js 2:0-62 19:30-50
@ ./node_modules/@faustwp/blocks/dist/mjs/index.js 2:0-79 6:0-160
@ ./wp-blocks/TestBlock/TestBlock.js 3:0-60 5:16-30
@ ./wp-blocks/TestBlock/index.js 3:0-36 7:19-28

ERROR in ./node_modules/@faustwp/core/dist/mjs/components/FaustProvider.js 4:0-40
Module not found: Error: Can't resolve 'next/router' in '/faust-test/faust-test-frontend/node_modules/@faustwp/core/dist/mjs/components'
Did you mean 'router.js'?
BREAKING CHANGE: The request 'next/router' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
@ ./node_modules/@faustwp/core/dist/mjs/index.js 1:0-62 21:0-482
@ ./node_modules/@faustwp/blocks/dist/mjs/resolveBlockTemplate.js 1:0-38 31:12-30 43:11-29
@ ./node_modules/@faustwp/blocks/dist/mjs/components/WordPressBlocksViewer.js 2:0-62 19:30-50
@ ./node_modules/@faustwp/blocks/dist/mjs/index.js 2:0-79 6:0-160
@ ./wp-blocks/TestBlock/TestBlock.js 3:0-60 5:16-30
@ ./wp-blocks/TestBlock/index.js 3:0-36 7:19-28

Steps to Reproduce

Steps to reproduce the behavior:

1. Setup a new project according to to the gettings started guides
2. Update to next 14 and react 18 to resolve dependency issues
3. Create a new block component as shown here: https://faustjs.org/tutorial/react-components-to-gutenberg-blocks
4. Run blockset command, this works fine.
5. Add const theme = useBlocksTheme(); to the component and run ´blockset` again, this now fails.

Reproducible Demo

https://github.com/traed/faust-blockset-bug

[theodesp]

Hey @traed. We are aware of this issue.

This is because you are trying to use code from faustwp-core that includes next/router and the wp-scripts tool fails to resolve them.

Also the useBlocksTheme only works within the WordPressBlocksViewer provider which you wont' be able to make it work within Gutenberg.

I'm not sure if those issues are fixable unless you are able to make this command work when you run it on your root folder:

wp-scripts start --no-watch --webpack-src-dir=wp-blocks

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#working-with-build-scripts

Also there is the issue with Gutenberg blocks does not allow React hooks to be present in the code. It all boils down to rendering static markup so React is not present it the runtime:

See here:
https://wordpress.stackexchange.com/questions/345372/dynamic-gutenberg-block-with-react-instead-of-php/367847#367847

https://stackoverflow.com/questions/72989907/error-minified-react-error-321-on-wordpress-custom-block-plugin/73012823#73012823

My suggestion is to create pure self-contained React Components until we find a better workaround or maybe if you have a suggestion feel free to mention it.

[theodesp]

I will move this to a conversation topic for Q/A