Using pnpm to install create react app shows warning - create-react-app

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:
Create react app using pnpm dlx in the command-line
pnpm dlx create-react-app ./temp-app
The above step created a package-lock.json file. So, to create pnpm's lock file,
pnpm import package-lock.json
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!