使用 pnpm 安装 create react app 显示警告答案

【问题标题】：Using pnpm to install create react app shows warning使用 pnpm 安装 create react app 显示警告
【发布时间】：2021-12-25 11:23:38
【问题描述】：

使用 pnpm dlx 和 pnpm import 为 create-react 应用程序（版本 5.0.0）安装依赖项时，我收到一条警告，提示应安装对等依赖项。 react 的开发环境运行良好。使用npx 时不会显示此警告消息。除了安装对等依赖项之外，我如何修复此警告消息？提前致谢。

我做了什么：

在命令行中使用 pnpm dlx 创建 react 应用

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

上述步骤创建了一个 package-lock.json 文件。所以，要创建 pnpm 的锁文件，

pnpm import package-lock.json

这创建了一个 pnpm-lock.yaml 文件，其中包含如下警告消息

 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

【问题讨论】：

标签： create-react-app pnpm

【解决方案1】：

如果出现此警告，您也需要安装这些依赖项。

复制下面列出的所有包Peer dependencies that should be installed: 并输入以下命令：

pnpm add your-dependencies-list

并将your-dependencies-list 替换为列出的所有对等依赖项列表。

需要注意的一点是，例如，如果您尝试将依赖项添加为开发依赖项，然后出现此警告，则您需要执行上述命令，但您需要添加 -D或 --dev 在包之前标记，以便将它们添加为开发依赖项。

当我尝试将 parcel 作为开发依赖项安装时，我也遇到了同样的问题

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"

所以我运行了以下命令：

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

万岁

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

一切顺利！

【讨论】：