Using pnpm to install create react app shows warning

Question

When installing dependencies for a create-react app(version 5.0.0) using pnpm dlx and pnpm import, i get a warning that peer dependencies should be installed. The dev environment for react spins up just fine. This warn message does not show up when using npx. How can i fix this warn message other than installing the peer dependencies?. Thanks in advance.

What i did:

1. Create react app using pnpm dlx in the command-line

pnpm dlx create-react-app ./temp-app

2. The above step created a package-lock.json file. So, to create pnpm's lock file,

pnpm import package-lock.json

3. This created a pnpm-lock.yaml file with a warn message as below

 WARN  Issues with peer dependencies found
.
├─┬ @testing-library/user-event
│ └── ✕ missing peer @testing-library/dom@>=7.21.4
└─┬ react-scripts
  ├── ✕ missing peer typescript@"^3.2.1 || ^4"
  ├─┬ eslint-config-react-app
  │ ├─┬ @typescript-eslint/eslint-plugin
  │ │ ├── ✕ missing peer typescript@"*"
  │ │ └─┬ @typescript-eslint/experimental-utils
  │ │   └─┬ @typescript-eslint/typescript-estree
  │ │     ├── ✕ missing peer typescript@"*"
  │ │     └─┬ tsutils
  │ │       └── ✕ missing peer 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"
  │ ├─┬ @typescript-eslint/parser
  │ │ └── ✕ missing peer typescript@"*"
  │ └─┬ eslint-plugin-flowtype
  │   ├── ✕ missing peer @babel/plugin-syntax-flow@^7.14.5
  │   └── ✕ missing peer @babel/plugin-transform-react-jsx@^7.14.9
  ├─┬ react-dev-utils
  │ └─┬ fork-ts-checker-webpack-plugin
  │   └── ✕ missing peer typescript@">= 2.7"
  └─┬ tailwindcss
    └── ✕ missing peer autoprefixer@^10.0.2
Peer dependencies that should be installed:
  @babel/plugin-syntax-flow@^7.14.5              @testing-library/dom@>=7.21.4                  typescript@">=3.2.1 <4.0.0 || >=4.0.0 <5.0.0"  
  @babel/plugin-transform-react-jsx@^7.14.9      autoprefixer@^10.0.2 

Answer 1

You need to install those dependencies too if this warning shows up.

Copy all the packages listed below Peer dependencies that should be installed: and type this command:

pnpm add your-dependencies-list

and replace the your-dependencies-list with all the list of peer dependencies which were listed.

One thing to note is for example if you were trying to add a dependency as a dev dependency and then this warning showed up, then you'll need to execute the above command but you'll need to add a -D or --dev flag before the packages so that it adds them as dev dependency.

Same issue occurred with me when i tried installing parcel as a dev dependency

Progress: resolved 318, reused 318, downloaded 0, added 0, done
 WARN  Issues with peer dependencies found
.
└─┬ parcel
  └─┬ @parcel/config-default
    ├─┬ @parcel/optimizer-htmlnano
    │ └─┬ htmlnano
    │   └── ✕ missing peer postcss@^8.3.11
    └─┬ @parcel/transformer-postcss
      └─┬ postcss-modules
        ├── ✕ missing peer postcss@^8.0.0
        ├─┬ postcss-modules-extract-imports
        │ └── ✕ missing peer postcss@^8.1.0
        ├─┬ postcss-modules-local-by-default
        │ ├── ✕ missing peer postcss@^8.1.0
        │ └─┬ icss-utils
        │   └── ✕ missing peer postcss@^8.1.0
        ├─┬ postcss-modules-scope
        │ └── ✕ missing peer postcss@^8.1.0
        └─┬ postcss-modules-values
          └── ✕ missing peer postcss@^8.1.0
Peer dependencies that should be installed:
  postcss@">=8.3.11 <9.0.0"

so i ran the following command:

pnpm add -D postcss@">=8.3.11 <9.0.0"

and hurray

Packages: +5 -11
+++++-----------
Progress: resolved 891, reused 891, downloaded 0, added 5, done

devDependencies:
- parcel 2.2.1
+ parcel 2.2.1
+ postcss 8.4.5

Everything worked out!