使用 pnpm 安装 create react app 显示警告
Using pnpm to install create react app shows warning
当使用 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
如果出现此警告,您也需要安装这些依赖项。
复制下面列出的所有包 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
一切顺利!
当使用 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
如果出现此警告,您也需要安装这些依赖项。
复制下面列出的所有包 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
一切顺利!