`npm install -g blitz --legacy-peer-deps` ==> `Cannot find module 'react'`

[winner106]

What is the problem?

a postinstall script throws an error

Paste all your error logs here:

npm install -g blitz --legacy-peer-deps
npm WARN deprecated querystring@0.2.1: The
npm WARN deprecated querystring@0.2.0: The
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
C:\Users\Administrator\AppData\Roaming\npm\blitz -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz\bin\blitz

> blitz@0.40.0 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz
> node scripts/postinstall.js

internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module 'react'
Require stack:
- C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz\node_modules\next\dist\pages\_app.js
- C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz\node_modules\next\app.js
- C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz\node_modules\@blitzjs\core\app\dist\blitzjs-core-app.cjs.dev.js
- C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz\node_modules\@blitzjs\core\app\dist\blitzjs-core-app.cjs.js
- C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz\dist\blitz.cjs.dev.js
- C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz\dist\blitz.cjs.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\blitz\node_modules\next\dist\pages\_app.js:18:37)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\blitz\\node_modules\\next\\dist\\pages\\_app.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\blitz\\node_modules\\next\\app.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\blitz\\node_modules\\@blitzjs\\core\\app\\dist\\blitzjs-core-app.cjs.dev.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\blitz\\node_modules\\@blitzjs\\core\\app\\dist\\blitzjs-core-app.cjs.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\blitz\\dist\\blitz.cjs.dev.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\blitz\\dist\\blitz.cjs.js'
  ]
}
npm WARN @testing-library/react@11.2.5 requires a peer of react@* but none is installed. You must install peer dependencies yourself.
npm WARN @testing-library/react@11.2.5 requires a peer of react-dom@* but none is installed. You must install peer dependencies yourself.
npm WARN @testing-library/react-hooks@4.0.1 requires a peer of react@>=16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-test-renderer@17.0.1 requires a peer of react@17.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ts-jest@26.5.0 requires a peer of typescript@>=3.8 <5.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-superjson-next@0.3.0 requires a peer of next@>=9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ts-node@9.1.1 requires a peer of typescript@>=2.7 but none is installed. You must install peer dependencies yourself.
npm WARN jscodeshift@0.11.0 requires a peer of @babel/preset-env@^7.1.6 but none is installed. You must install peer dependencies yourself.
npm WARN @next/react-dev-overlay@11.1.0 requires a peer of react@^17.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN @next/react-dev-overlay@11.1.0 requires a peer of react-dom@^17.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN null-loader@4.0.1 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN styled-jsx@4.0.0 requires a peer of react@>= 16.8.0 || 17.x.x || 18.x.x but none is installed. You must install peer dependencies yourself.
npm WARN use-subscription@1.5.1 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-query@3.21.1 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ink-spinner@4.0.1 requires a peer of react@^16.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN ink@3.0.8 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-reconciler@0.24.0 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-next@11.1.2 requires a peer of eslint@^7.23.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-next@11.1.2 requires a peer of next@>=10.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/eslint-plugin@4.17.0 requires a peer of eslint@^5.0.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/experimental-utils@4.17.0 requires a peer of eslint@* but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-import@2.24.2 requires a peer of eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.26.1 requires a peer of eslint@^3 || ^4 || ^5 || ^6 || ^7 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-jsx-a11y@6.4.1 requires a peer of eslint@^3 || ^4 || ^5 || ^6 || ^7 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-import-resolver-typescript@2.5.0 requires a peer of eslint@* but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-hooks@4.2.0 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@4.32.0 requires a peer of eslint@^5.0.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jsdom@16.7.0 requires a peer of canvas@^2.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-shallow-renderer@16.14.1 requires a peer of react@^16.0.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\blitz\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ blitz@0.40.0
updated 1 package in 41.287s

Paste all relevant code snippets here:

npm install -g blitz

or

npm install -g blitz --legacy-peer-deps

What are detailed steps to reproduce this?

1. npm install -g blitz
2. npm install -g blitz --legacy-peer-deps

Run blitz -v and paste the output here:

Windows 10 | win32-x64 | Node: v14.18.0

blitz: 0.40.0 (global)

  Package manager: npm
  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 17.57 GB / 23.87 GB
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  npmPackages:
    @prisma/client: Not Found
    blitz: Not Found
    prisma: Not Found
    react: Not Found
    react-dom: Not Found
    typescript: Not Found

Please include below any other applicable logs and screenshots that show your problem:

No response

[winner106]

I try npm install -global blitz , but thow the same error.

[MrLeebo]

Have you tried npm install -g blitz --legacy-peer-deps or running it with NPX npx blitz new app-name ?

[winner106]

Have you tried npm install -g blitz --legacy-peer-deps or running it with NPX npx blitz new app-name ?

yep，I have tried, problems still exist, too sad😇

[winner106]

When I try it in version 0.40, problems still exist, it's so pity. I want to use this is in Windows 10 as soon as possible

[flybayer]

@winner106 can you try skipping global install and do npx blitz new myApp?

Another optional workaround is install globally with yarn, yarn global add blitz

[winner106]

Thanks for your reply, I tried, but also prompt error

npx blitz new myApp
[..................] - loadDep:lodash: sill resolveWithNewModule shebang-regex@1.0.0 checking installable [..................] - loadDep:lodash: sill resolveWithNewModule shebang-regex@1.0.0 che[##................] - fetchMetadata: sill internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module 'react'
Require stack:
- C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\15836\node_modules\blitz\node_modules\next\dist\pages\_app.js
- C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\15836\node_modules\blitz\node_modules\next\app.js
- C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\15836\node_modules\blitz\node_modules\@blitzjs\core\app\dist\blitzjs-core-app.cjs.dev.js
- C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\15836\node_modules\blitz\node_modules\@blitzjs\core\app\dist\blitzjs-core-app.cjs.js
- C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\15836\node_modules\blitz\dist\blitz.cjs.dev.js
- C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\15836\node_modules\blitz\dist\blitz.cjs.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\15836\node_modules\blitz\node_modules\next\dist\pages\_app.js:18:37)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm-cache\\_npx\\15836\\node_modules\\blitz\\node_modules\\next\\dist\\pages\\_app.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm-cache\\_npx\\15836\\node_modules\\blitz\\node_modules\\next\\app.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm-cache\\_npx\\15836\\node_modules\\blitz\\node_modules\\@blitzjs\\core\\app\\dist\\blitzjs-core-app.cjs.dev.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm-cache\\_npx\\15836\\node_modules\\blitz\\node_modules\\@blitzjs\\core\\app\\dist\\blitzjs-core-app.cjs.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm-cache\\_npx\\15836\\node_modules\\blitz\\dist\\blitz.cjs.dev.js',
    'C:\\Users\\Administrator\\AppData\\Roaming\\npm-cache\\_npx\\15836\\node_modules\\blitz\\dist\\blitz.cjs.js'
  ]
}
√ Install dependencies? · yarn
√ Pick a form library (you can switch to something else later if you want) · React Final Form

Hang tight while we set up your new Blitz app!

CREATE    .env
CREATE    .env.local
CREATE    .env.test.local
CREATE    .eslintrc.js
CREATE    README.md
CREATE    app\api\.keep
CREATE    app\auth\components\LoginForm.tsx
CREATE    app\auth\components\SignupForm.tsx
CREATE    app\auth\mutations\changePassword.ts
CREATE    app\auth\mutations\forgotPassword.test.ts
CREATE    app\auth\mutations\forgotPassword.ts
CREATE    app\auth\mutations\login.ts
CREATE    app\auth\mutations\logout.ts
CREATE    app\auth\mutations\resetPassword.test.ts
CREATE    app\auth\mutations\resetPassword.ts
CREATE    app\auth\mutations\signup.ts
CREATE    app\auth\pages\forgot-password.tsx
CREATE    app\auth\pages\login.tsx
CREATE    app\auth\pages\reset-password.tsx
CREATE    app\auth\pages\signup.tsx
CREATE    app\auth\validations.ts
CREATE    app\core\components\Form.tsx
CREATE    app\core\components\LabeledTextField.tsx
CREATE    app\core\hooks\useCurrentUser.ts
CREATE    app\core\layouts\Layout.tsx
CREATE    app\pages\404.tsx
CREATE    app\pages\_app.tsx
CREATE    app\pages\_document.tsx
CREATE    app\pages\index.test.tsx
CREATE    app\pages\index.tsx
CREATE    app\users\queries\getCurrentUser.ts
CREATE    babel.config.js
CREATE    blitz-env.d.ts
CREATE    blitz.config.ts
CREATE    db\index.ts
CREATE    db\migrations\.keep
CREATE    db\schema.prisma
CREATE    db\seeds.ts
CREATE    integrations\.keep
CREATE    jest.config.ts
CREATE    mailers\.keep
CREATE    mailers\forgotPasswordMailer.ts
CREATE    package.json
CREATE    public\favicon.ico
CREATE    public\logo.png
CREATE    test\setup.ts
CREATE    test\utils.tsx
CREATE    tsconfig.json
CREATE    types.ts

√ Retrieving the freshest of dependencies
√ Resolving packages
√ Building fresh packages
√ Initializing SQLite database
√ Committing your app

Your new Blitz app is ready! Next steps:

   1. cd myApp
   2. blitz dev

myApp folder has been successfully created, but when I install chakra-ui :

  npx blitz install chakra-ui

  ERROR  Cannot read property 'dots' of undefined

 .blitz/recipe-install/node_modules/ink-spinner/build/index.js:12:43

  9:  */
 10: const Spinner = ({ type = 'dots' }) => {
 11:     const [frame, setFrame] = react_1.useState(0);
 12:     const spinner = cli_spinners_1.default[type];
 13:     react_1.useEffect(() => {
 14:         const timer = setInterval(() => {
 15:             setFrame(previousFrame => {

 - Spinner (.blitz/recipe-install/node_modules/ink-spinner/build/index.js:12:43)
 - renderWithHooks (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:6036:18)
 - mountIndeterminateComponent (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:8570:13)
 - beginWork$1 (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:9938:16)
 - Object.invokeGuardedCallbackImpl (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:11563:10)
 - invokeGuardedCallback (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:11740:31)
 - beginWork$$1 (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:15778:7)
 - performUnitOfWork (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:14696:12)
 - workLoopSync (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:14669:22)
 - performSyncWorkOnRoot (.blitz/recipe-install/node_modules/react-reconciler/cjs/react-reconciler.development.js:14265:11)

✕ TypeError: Cannot read property 'dots' of undefined

[flybayer]

Ok, not sure why the cannot find react issue.. but looks that is working.

The blitz install problem is this: https://github.com/blitz-js/legacy-framework/issues/241

[flybayer]

Everyone with the "cannot find module react" issue: please try pinning the react and react-dom version in your package.json to 18.0.0-alpha-5ca4b0433-20211020 (or any other version) and see if that fixes it.

I was talking with someone about this, and it only happened on first clone on new computers. And they could fix it by deleting package-lock.json and running npm i. So I think pinning the react version should fix it.