Bug in dependencies installation by pnpm

[linbudu599]

What is the problem?

New project created with pnpm as package manager doesnot work correctly:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Using external babel configuration from /Users/linbudu/Desktop/OPEN_SOURCE/blitz-example/babel.config.js
error - ../../../.nvm/versions/node/v14.17.4/pnpm-global/5/node_modules/.pnpm/styled-jsx@4.0.0/node_modules/styled-jsx/dist/style.js:7:0
Module not found: Can't resolve 'react'

Import trace for requested module:
./../../../.nvm/versions/node/v14.17.4/pnpm-global/5/node_modules/.pnpm/styled-jsx@4.0.0/node_modules/styled-jsx/style.js
./app/core/components/Form.tsx
./app/auth/components/LoginForm.tsx
./app/pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found

Seems like styled-jsx is dependency of next, when installing packages which are not listed in package.json, pnpm put it in the global store, so when styled-jsx is requiring react, as node's dep resolution it search for the global(if we install react globally like pnpm install react -g, this error was resolved).

If we install styled-jsx locally, then it requires the local installed react package, which makes project work normally, but this doesnot seem to be a excellent solution, only install styled-jsx in pnpm project? add styled-jsx for all package manager with actual version required by next?

Also, @types/node should also be added to package.json to avoid errors:

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/node by running:

        npm install --save-dev @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

Paste all your error logs here:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Using external babel configuration from /Users/linbudu/Desktop/OPEN_SOURCE/blitz-example/babel.config.js
error - ../../../.nvm/versions/node/v14.17.4/pnpm-global/5/node_modules/.pnpm/styled-jsx@4.0.0/node_modules/styled-jsx/dist/style.js:7:0
Module not found: Can't resolve 'react'

Import trace for requested module:
./../../../.nvm/versions/node/v14.17.4/pnpm-global/5/node_modules/.pnpm/styled-jsx@4.0.0/node_modules/styled-jsx/style.js
./app/core/components/Form.tsx
./app/auth/components/LoginForm.tsx
./app/pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found

Paste all relevant code snippets here:

// styled-jsx internal code
"use strict";

exports.__esModule = true;
exports["default"] = JSXStyle;
exports.flush = flush;

var _react = require("react");

var _stylesheetRegistry = _interopRequireDefault(require("./stylesheet-registry"));

What are detailed steps to reproduce this?

1. run blitz new myApp, and choose pnpm as package manager.
2. run blitz dev.
3. you got the error.
4. run pnpm i styled-jsx, and rerun blitz dev.
5. you fixed the error.

Run blitz -v and paste the output here:

Loaded env from /Users/linbudu/Desktop/OPEN_SOURCE/blitz-example/.env.local
Loaded env from /Users/linbudu/Desktop/OPEN_SOURCE/blitz-example/.env
macOS Big Sur | darwin-arm64 | Node: v14.17.4

blitz: 0.44.4 (global)
blitz: 0.44.4 (local)

  Package manager: npm 
  System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 107.06 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.4/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v14.17.4/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.6.0 => 3.6.0 
    blitz: 0.44.4 => 0.44.4 
    prisma: 3.6.0 => 3.6.0 
    react: 18.0.0-beta-149b420f6-20211119 => 18.0.0-beta-149b420f6-20211119 
    react-dom: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020 
    typescript: ~4.5 => 4.5.4 

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

No response

[beerose]

Thanks for the report!

[gnomeria]

Were you able to install any recipes @linbudu599 ?

[byoungd]

Same problem via pnpm by using blitz new my-blitz-app. Use pnpm dev instead of blitz dev will work.