Strapi V4 not working with Node 16 + npm7/8 (without yarn installed globally)

[jeromelaurens]

Bug report

Describe the bug

When running the first command line provided for strapi V4 npx create-strapi-app my-project --quickstart , it ends with an error

Steps to reproduce the behavior

1. Go to your terminal App
2. type npx create-strapi-app my-project --quickstart
3. wait
4. See error

> my-project@0.1.0 build
> strapi build "--no-optimization"

Building your admin UI with development configuration ...

● Webpack █████████████████████████ building (10%) 0/1 entries 114/121 dependencies 9/87 modules 71 active
 node_modules/regenerator-runtime/runtime.js

ModuleNotFoundError: Module not found: Error: Can't resolve '@strapi/design-system/themes' in '/xxxxxxxxxx/my-project/.cache/admin/src'
...

Expected behavior

Strapi working

System

• Node.js version: latest LTS : v16.13.0
• NPM version: 8.1.0
• Strapi versionV4
• Database: not yet the problem
• Operating system: MacOS Monterey with ARM Silicon chip

[be90728]

I am using the M1 system, and I encountered this situation at the beginning, but then I solved it by the following methods
Maybe you can try the following
(Only for v4)
npx create-strapi-starter my-project next-blog
After the installation is over, it will be built automatically, break it
Then
cd my-project && cd backend && npm run develop
This should not be a system problem

At the same time, you should also use npx create-strapi-starter my-project next-blog to build Strapi v4
I don't know why the strapi version created by npx create-strapi-app is 3.6.8(v3)

[derrickmehaffy]

Issue only occurs when using Node 16 + NPM 7/8 without yarn.

Downgrading to Node 14 or installing yarn globally is the workaround

(Has nothing to do with CPU base, arm or x86)

[jeromelaurens]

Great ! I can confirm that @derrickmehaffy 's solution to go through yarn installed globally works.
Seems a good workaround to the problem.
The problem with npx is still there, and as @derrickmehaffy says, has probably nothing to do with CPU base, arm or x86.
Is it a problem with MacOS Monterey or simply with V4 + npm ?
We can change the issue's title depending on the origin of the problem

[derrickmehaffy]

It's v4 + npm 8 only

[ankit-kumar-jat]

npm install @strapi/design-system
solved problem for me

[joachimfbinhouse]

npm install @strapi/design-system solved problem for me

Solved it for me too.

Node v16.13.0
NPM 8.1.0
Strapi 4.0.0

[biapar]

I've the same problem.