I'm starting the process of learning how to write my own custom block patterns for WordPress Gutenberg. I've found a tutorial that walks me through the steps towards creating a new plugin in wp-content/plugins called "my-first-block".
I've installed node and am trying to run the command npx @wordpress/create-block my-first-block. When I run this command, I get the following error that I think is complaining about @wordpress/scripts. The first error that is thrown is Error: Command failed with exit code 1: npm install @wordpress/scripts --save-dev and then it goes onto display a series of other errors, each line starting with npm ERR! Could not resolve dependency:
Here is the full error log;
Error: Command failed with exit code 1: npm install @wordpress/scripts --save-dev
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: prettier@2.2.1-beta-1
npm WARN node_modules/prettier
npm WARN prettier@"npm:wp-prettier@2.2.1-beta-1" from @wordpress/scripts@19.2.1
npm WARN node_modules/@wordpress/scripts
npm WARN dev @wordpress/scripts@"*" from the root project
npm WARN 1 more (@wordpress/eslint-plugin)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer prettier@">=1.13.0" from eslint-plugin-prettier@3.4.1
npm WARN node_modules/eslint-plugin-prettier
npm WARN eslint-plugin-prettier@"^3.3.0" from @wordpress/eslint-plugin@9.3.0
npm WARN node_modules/@wordpress/eslint-plugin
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: acorn@7.4.1
npm ERR! node_modules/acorn
npm ERR! acorn@"^7.4.0" from espree@7.3.1
npm ERR! node_modules/espree
npm ERR! espree@"^7.3.1" from eslint@7.32.0
npm ERR! node_modules/eslint
npm ERR! eslint@"^7.17.0" from @wordpress/scripts@19.2.1
npm ERR! node_modules/@wordpress/scripts
npm ERR! dev @wordpress/scripts@"*" from the root project
npm ERR! 15 more (@wordpress/eslint-plugin, eslint-plugin-markdown, ...)
npm ERR! espree@"^7.3.0" from @eslint/eslintrc@0.4.3
npm ERR! node_modules/@eslint/eslintrc
npm ERR! @eslint/eslintrc@"^0.4.3" from eslint@7.32.0
npm ERR! node_modules/eslint
npm ERR! eslint@"^7.17.0" from @wordpress/scripts@19.2.1
npm ERR! node_modules/@wordpress/scripts
npm ERR! 15 more (@wordpress/eslint-plugin, eslint-plugin-markdown, ...)
npm ERR! peer acorn@"^6.0.0 || ^7.0.0 || ^8.0.0" from acorn-jsx@5.3.2
npm ERR! node_modules/acorn-jsx
npm ERR! acorn-jsx@"^5.3.1" from espree@7.3.1
npm ERR! node_modules/espree
npm ERR! espree@"^7.3.1" from eslint@7.32.0
npm ERR! node_modules/eslint
npm ERR! eslint@"^7.17.0" from @wordpress/scripts@19.2.1
npm ERR! node_modules/@wordpress/scripts
npm ERR! 15 more (@wordpress/eslint-plugin, eslint-plugin-markdown, ...)
npm ERR! 1 more (@eslint/eslintrc)
npm ERR! 1 more (acorn-globals)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional acorn@"^8.5.0" from terser@5.10.0
npm ERR! node_modules/terser
npm ERR! terser@"^5.7.2" from terser-webpack-plugin@5.2.5
npm ERR! node_modules/terser-webpack-plugin
npm ERR! terser-webpack-plugin@"^5.1.4" from @wordpress/scripts@19.2.1
npm ERR! node_modules/@wordpress/scripts
npm ERR! dev @wordpress/scripts@"*" from the root project
npm ERR! 1 more (webpack)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\username\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\username\AppData\Local\npm-cache\_logs\debug.log
at makeError (C:\Users\username\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\execa\lib\error.js:59:11)
at handlePromise (C:\Users\username\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\execa\index.js:114:26)
at processTicksAndRejections (node:internal/process/task_queues:93:5)
at async module.exports (C:\Users\username\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\@wordpress\create-block\lib\init-wp-scripts.js:19:2)
at async module.exports (C:\Users\username\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\@wordpress\create-block\lib\scaffold.js:103:3)
at async Command.<anonymous> (C:\Users\username\AppData\Local\npm-cache\_npx\0890e296436e9575\node_modules\@wordpress\create-block\lib\index.js:91:6) {
shortMessage: 'Command failed with exit code 1: npm install @wordpress/scripts --save-dev',
command: 'npm install @wordpress/scripts --save-dev',
exitCode: 1,
signal: undefined,
signalDescription: undefined,
stdout: '',
stderr: 'npm WARN ERESOLVE overriding peer dependency\n' +
'npm WARN Found: prettier@2.2.1-beta-1\n' +
'npm WARN node_modules/prettier\n' +
'npm WARN prettier@"npm:wp-prettier@2.2.1-beta-1" from @wordpress/scripts@19.2.1\n' +
'npm WARN node_modules/@wordpress/scripts\n' +
'npm WARN dev @wordpress/scripts@"*" from the root project\n' +
'npm WARN 1 more (@wordpress/eslint-plugin)\n' +
'npm WARN \n' +
'npm WARN Could not resolve dependency:\n' +
'npm WARN peer prettier@">=1.13.0" from eslint-plugin-prettier@3.4.1\n' +
'npm WARN node_modules/eslint-plugin-prettier\n' +
'npm WARN eslint-plugin-prettier@"^3.3.0" from @wordpress/eslint-plugin@9.3.0\n' +
'npm WARN node_modules/@wordpress/eslint-plugin\n' +
'npm ERR! code ERESOLVE\n' +
'npm ERR! ERESOLVE unable to resolve dependency tree\n' +
'npm ERR! \n' +
'npm ERR! Found: acorn@7.4.1\n' +
'npm ERR! node_modules/acorn\n' +
'npm ERR! acorn@"^7.4.0" from espree@7.3.1\n' +
'npm ERR! node_modules/espree\n' +
'npm ERR! espree@"^7.3.1" from eslint@7.32.0\n' +
'npm ERR! node_modules/eslint\n' +
'npm ERR! eslint@"^7.17.0" from @wordpress/scripts@19.2.1\n' +
'npm ERR! node_modules/@wordpress/scripts\n' +
'npm ERR! dev @wordpress/scripts@"*" from the root project\n' +
'npm ERR! 15 more (@wordpress/eslint-plugin, eslint-plugin-markdown, ...)\n' +
'npm ERR! espree@"^7.3.0" from @eslint/eslintrc@0.4.3\n' +
'npm ERR! node_modules/@eslint/eslintrc\n' +
'npm ERR! @eslint/eslintrc@"^0.4.3" from eslint@7.32.0\n' +
'npm ERR! node_modules/eslint\n' +
'npm ERR! eslint@"^7.17.0" from @wordpress/scripts@19.2.1\n' +
'npm ERR! node_modules/@wordpress/scripts\n' +
'npm ERR! 15 more (@wordpress/eslint-plugin, eslint-plugin-markdown, ...)\n' +
'npm ERR! peer acorn@"^6.0.0 || ^7.0.0 || ^8.0.0" from acorn-jsx@5.3.2\n' +
'npm ERR! node_modules/acorn-jsx\n' +
'npm ERR! acorn-jsx@"^5.3.1" from espree@7.3.1\n' +
'npm ERR! node_modules/espree\n' +
'npm ERR! espree@"^7.3.1" from eslint@7.32.0\n' +
'npm ERR! node_modules/eslint\n' +
'npm ERR! eslint@"^7.17.0" from @wordpress/scripts@19.2.1\n' +
'npm ERR! node_modules/@wordpress/scripts\n' +
'npm ERR! 15 more (@wordpress/eslint-plugin, eslint-plugin-markdown, ...)\n' +
'npm ERR! 1 more (@eslint/eslintrc)\n' +
'npm ERR! 1 more (acorn-globals)\n' +
'npm ERR! \n' +
'npm ERR! Could not resolve dependency:\n' +
'npm ERR! peerOptional acorn@"^8.5.0" from terser@5.10.0\n' +
'npm ERR! node_modules/terser-webpack-plugin\n' +
'npm ERR! dev @wordpress/scripts@"*" from the root project\n' +
'npm ERR! 1 more (webpack)\n' +
'npm ERR! \n' +
'npm ERR! Fix the upstream dependency conflict, or retry\n' +
'npm ERR! this command with --force, or --legacy-peer-deps\n' +
'npm ERR! to accept an incorrect (and potentially broken) dependency resolution.\n' +
'npm ERR! \n' +
'npm ERR! See C:\\Users\\username\\AppData\\Local\\npm-cache\\eresolve-report.txt for a full report.\n' +
'\n' +
'npm ERR! A complete log of this run can be found in:\n' +
'npm ERR! C:\\Users\\username\\AppData\\Local\\npm-cache\\_logs\\debug.log',
failed: true,
timedOut: false,
isCanceled: false,
killed: false
}
npm ERR! code 1
npm ERR! path D:\repos\ParentFolder\ProjectFolder\wp-content\plugins
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c wp-create-block my-first-block
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\username\AppData\Local\npm-cache\_logs\debug.log
In the errors it mentions something like "Fix the upstream dependency conflict" which I presume is the cause of the issue. I'm running node v15.5.1 and I've also tried installing Docker and running WLS with Ubuntu.
My aim is to be able to develop my own blocks and patterns for Gutenberg and release these as a WordPress plugin.
Can you try npm install @wordpress/scripts --save-dev --legacy-peer-deps
This solved it for me.