@wordpress/scripts version 20.0.1 doesn't compile files

[aurooba]

Description

It could be that I'm doing something wrong, but since updating wordpress/scripts to 20.0.1, all it does (when there are multiple blocks) is copy the block.json files for each block into the build folder. And doesn't actually compile anything. I've had to downgrade to 19.2.4 for compiling of any kind to work. I've been following #25188, and wondering if the two patches introduced earlier this month caused some kind of issue.

Step-by-step reproduction instructions

1. Create a plugin
2. Add two blocks inside the src/ file
3. Install @wordpress/scripts with: npm install @wordpress/scripts --save-dev
4. Run npx wp-scripts start (or npm start if you added the scripts to your package.json)
5. See the new build folder with two subfolders (one for each block) with only the block.json files duplicated.

Screenshots, screen recording, code snippet

> start
> wp-scripts start

asset block1/block.json 908 bytes [emitted] [from: src/block1/block.json] [copied]
asset block2/block.json 724 bytes [emitted] [from: src/block2/block.json] [copied]
webpack 5.67.0 compiled successfully in 35 ms

Environment info

• Node v16.13.2
• NPM 8.1.2
• @wordpress/scripts 20.0.1
• Mac OS Monterey 12.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[spencerfinnell]

Related/duplicate: #38343

[gziolo]

I've been following #25188, and wondering if the two patches introduced earlier this month caused some kind of issue.

@aurooba, thank you for the report. It looks like you are right. It was a risky change in terms of backward compatibility and I would appreciate your help to improve handling for existing projects. Do you have your plugin publicly available so I could give it for a spin? Alternatively, I’d like to confirm how do you run the build. Is it npm build that calls wp-scripts start or is it something customized?

[aurooba]

@gziolo yes, the plugin is here: https://github.com/createwithrani/superlist

However, I want to note that I tested the new version on a totally empty brand new plugin, scaffolding test blocks with wp cli and running wp-scripts on them, as well. I saw the same issue, so I'm not sure it's a backwards compatibility issue.

I've tested/tried both the build and start scripts and see the same issue.

[gziolo]

yes, the plugin is here: https://github.com/createwithrani/superlist

Thank you so much. I'm giving it a round of testing 👍🏻

[gziolo]

I published a new version v20.0.2 of @wordpress/scripts to npm that improves the handling for the build command. I'm closing this issue but I'm happy to reopen if more work is necessary.

Some more details from my investigation on the plugin. I noticed that the Superlist plugin provides its own webpack config file:

https://github.com/createwithrani/superlist/blob/main/webpack.config.js

If you remove it, it will now fall back to the entry point src/index.js. This is because in block.json files scripts are referenced with the path that doesn't contain the src folder.

https://github.com/createwithrani/superlist/blob/64733f67d78651893cf24b4c3b2b4544228c6242/src/superlist-item/block.json#L25

https://github.com/createwithrani/superlist/blob/64733f67d78651893cf24b4c3b2b4544228c6242/src/superlist/block.json#L37

The plan is to use relative paths to the script from block.json so those paths match when the build process moves them to build folder.

In this case, there are 3 options:

• you continue using the custom webpack config
• you import both blocks in the src/index.js and register that script in PHP and then pass its handle as editorScript
• you remove src/index.js and pass a path relative to block.json in the same folder:
  • "editorScript": "file:index.js",

[aurooba]

@gziolo I added the webpack config file to the plugin after wordpress/scripts stopped working after the update. I'm going to go ahead and test the fresh plugin I have as well as that plugin without the config file to see if it's all working. Thanks for the update!

[aurooba]

I've tested this with the new plugin. I think the key part of the instruction you gave me is this for using the block.json version (which is highly preferred) is:

• you remove src/index.js and pass a path relative to block.json in the same folder:
  • "editorScript": "file:index.js",

This piece of information should absolutely live in the documentation on NPM itself and in the developer docs. The phrasing over there is simply not clear enough, and I'm pretty sure this is the mistake I made initially when testing v20.0.1.

I'm going to propose a PR (#38379) to reflect this phrasing in the documentation. Thanks @gziolo!

[gziolo]

I'm going to propose a PR (#38379) to reflect this phrasing in the documentation.

Thank you! I appreciate all the clarifications proposed. I will review tomorrow 👌

[muzafferkaya-gokalpay]

I am sorry for saying this but, now i can not create any WordPress block by @wordpress/create-block package since that I updated the npm to latest version. Unfortunately, i can not rearrange or add a line of code to my old blocks. My terminal is full of errors. I think this is shame for "@wordpress/scripts create-block" developers. This is terrible. Please help me with suggesting any other package for creating WordPress block with block.json usage.

[muzafferkaya-gokalpay]

This is my terminal:

PS C:\xampp2\htdocs\benimsitem\wp-content\plugins> npx @wordpress/create-block stcnnt-ps

Creating a new WordPress plugin in "stcnnt-ps" folder.

Creating a "block.json" file.

Creating a "package.json" file.

Installing @wordpress/scripts package. It might take a couple of minutes...

Formatting JavaScript files.

Compiling block.
C:\Users\Muzaffer\AppData\Local\npm-cache_npx\0890e296436e9575\node_modules\execa\lib\error.js:59
error = new Error(message);
^

Error: Command failed with exit code 2: npm run build
[webpack-cli] HookWebpackError: error:0308010C:digital envelope routines::unsupported
at makeWebpackError (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\HookWebpackError.js:48:9)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:3057:12
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :41:1)
at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:478:17)
at _next0 (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :39:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :52:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :13:1)
-- inner error --
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at createHash (node:crypto:135:10)
at DependencyExtractionWebpackPlugin.addAssets (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules@wordpress\dependency-extraction-webpack-plugin\lib\index.js:222:19)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules@wordpress\dependency-extraction-webpack-plugin\lib\index.js:133:18
at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:476:10)
at _next0 (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :39:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :52:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :13:1)
caused by plugins in Compilation.hooks.processAssets
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at createHash (node:crypto:135:10)
at DependencyExtractionWebpackPlugin.addAssets (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules@wordpress\dependency-extraction-webpack-plugin\lib\index.js:222:19)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules@wordpress\dependency-extraction-webpack-plugin\lib\index.js:133:18
at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:476:10)
at _next0 (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :39:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :52:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :13:1)

[email protected] build
wp-scripts build

at makeError (C:\Users\Muzaffer\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\execa\lib\error.js:59:11)       
at handlePromise (C:\Users\Muzaffer\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\execa\index.js:114:26)      
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async module.exports (C:\Users\Muzaffer\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\@wordpress\create-block\lib\init-wp-scripts.js:31:2)
at async module.exports (C:\Users\Muzaffer\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\@wordpress\create-block\lib\scaffold.js:102:3)
at async Command.<anonymous> (C:\Users\Muzaffer\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\@wordpress\create-block\lib\index.js:94:6) {

shortMessage: 'Command failed with exit code 2: npm run build',
command: 'npm run build',
exitCode: 2,
signal: undefined,
signalDescription: undefined,
stdout: '\n> [email protected] build\n> wp-scripts build\n',
stderr: '[webpack-cli] \x1B[31mHookWebpackError: error:0308010C:digital envelope routines::unsupported\n' +
' at makeWebpackError (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\HookWebpackError.js:48:9)\n' +
' at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:3057:12\n' +
' at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :41:1)\n' +
' at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:478:17)\n' +
' at _next0 (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :39:1)\n' +
' at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :52:1)\n' +
' at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :13:1)\n' +
'-- inner error --\n' +
'Error: error:0308010C:digital envelope routines::unsupported\n' +
' at new Hash (node:internal/crypto/hash:67:19)\n' +
' at createHash (node:crypto:135:10)\n' +
' at DependencyExtractionWebpackPlugin.addAssets (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\@WordPress\dependency-extraction-webpack-plugin\lib\index.js:222:19)\n' +
' at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\@WordPress\dependency-extraction-webpack-plugin\lib\index.js:133:18\n' +
' at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:476:10)\n' +
' at _next0 (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :39:1)\n' +
' at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :52:1)\n' +
' at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :13:1)\n' +
'caused by plugins in Compilation.hooks.processAssets\n' +
'Error: error:0308010C:digital envelope routines::unsupported\n' +
' at new Hash (node:internal/crypto/hash:67:19)\n' +
' at createHash (node:crypto:135:10)\n' +
' at DependencyExtractionWebpackPlugin.addAssets (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\@WordPress\dependency-extraction-webpack-plugin\lib\index.js:222:19)\n' +
' at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\@WordPress\dependency-extraction-webpack-plugin\lib\index.js:133:18\n' +
' at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:476:10)\n' +
' at _next0 (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :39:1)\n' +
' at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :52:1)\n' +
' at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :13:1)\x1B[39m',
failed: true,
timedOut: false,
isCanceled: false,
killed: false
}

Node.js v17.4.0
PS C:\xampp2\htdocs\benimsitem\wp-content\plugins> cd stcnnt-ps
PS C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps> npm start

[email protected] start
wp-scripts start

[webpack-cli] HookWebpackError: error:0308010C:digital envelope routines::unsupported
at makeWebpackError (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\HookWebpackError.js:48:9)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:3057:12
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :23:1)
at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:478:17)
at _next0 (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :21:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :34:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :11:1)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:500:10
at Hook.eval [as callAsync] (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :7:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\Hook.js:18:14)
-- inner error --
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at createHash (node:crypto:135:10)
at DependencyExtractionWebpackPlugin.addAssets (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules@wordpress\dependency-extraction-webpack-plugin\lib\index.js:222:19)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules@wordpress\dependency-extraction-webpack-plugin\lib\index.js:133:18
at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:476:10)
at _next0 (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :21:1)
js:33:10), :34:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :11:1)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:500:10
at Hook.eval [as callAsync] (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :7:1)
caused by plugins in Compilation.hooks.processAssets
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at createHash (node:crypto:135:10)
at DependencyExtractionWebpackPlugin.addAssets (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules@wordpress\dependency-extraction-webpack-plugin\lib\index.js:222:19)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules@wordpress\dependency-extraction-webpack-plugin\lib\index.js:133:18
at fn (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:476:10)
y.js:33:10), :21:1)
js:33:10), :34:1)
at eval (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :11:1)
at C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\webpack\lib\Compilation.js:500:10
at Hook.eval [as callAsync] (eval at create (C:\xampp2\htdocs\benimsitem\wp-content\plugins\stcnnt-ps\node_modules\tapable\lib\HookCodeFactory.js:33:10), :7:1)

[codente]

I'm getting the same as @muzafferkaya-gokalpay using this tool and trying to create a new project.

[aurooba]

@muzafferkaya-gokalpay and @codente this could be because you are on node 17+, there have been some webpack issues that aren't yet fully resolved, maybe try downgrading node to v16?

[codente]

@muzafferkaya-gokalpay and @codente this could be because you are on node 17+, there have been some webpack issues that aren't yet fully resolved, maybe try downgrading node to v16?

Thank you. That resolved it for me.