Webstorm开发React项目常见报错

作者：陆金龙发表时间：2022-12-31 10:17

关键词：[eslint] Cannot read config file

1.node:internal/modules/cjs/loader:998

Error: Failed to patch ESLint because the calling module was not recognized.

node:internal/modules/cjs/loader:998

解决方案：执行cnpm install eslint。

如果不行，删除node_modules目录，重新执行npm install 或者cnpm install 。

2.[eslint] Cannot read config file

删除node_modules,重新执行npm i

Compiled with problems:

ERROR

[eslint] Cannot read config file: D:\LiuzhiyuanWeb\code\react-project-pro\node_modules\_eslint-config-react-app@7.0.1@eslint-config-react-app\base.js Error: Failed to patch ESLint because the calling module was not recognized. If you are using a newer ESLint version that may be unsupported, please create a GitHub issue: https://github.com/microsoft/rushstack/issues Referenced from: BaseConfig

ERROR

Error: Child compilation failed: [eslint] Cannot read config file: D:\LiuzhiyuanWeb\code\react-project-pro\node_modules\_eslint-config-react-app@7.0.1@eslint-config-react-app\base.js Error: Failed to patch ESLint because the calling module was not recognized. If you are using a newer ESLint version that may be unsupported, please create a GitHub issue: https://github.com/microsoft/rushstack/issues Referenced from: BaseConfig

3.WebStorm npm运行报错。cnpm.ps1 在此系统上禁止运行脚本

在开始菜单里找到Windows PowerShell.并以管理员身份运行，如果直接运行怕权限不够，依然会出错。

1、在系统中搜索框输入 Windos PowerShell
2、点击“管理员身份运行”

3、输入“ set-ExecutionPolicy RemoteSigned”回车
4、根据提示，输入A，回车

5.再输入 get-ExecutionPolicy

直到看到RemoteSigned就成功了。

4.Import in body of module; reorder to top import/first

[eslint]

src\api\data-label.js

Line 20:1: Import in body of module; reorder to top import/first

解决方案：将import代码放到最前面。

5.Import in body of module; reorder to top

const 定义的组件应该放在引用代码的前面。

如下图：Home的定义在function App后面，因此报以上错误。

改成Home的定义放在function App前面。

6. npm install sass-loader node-sass失败,改用cnpm

npm install sass-loader失败，改成cnpm 安装。

1.npm install -g cnpm --registry=https://registry.npm.taobao.org

2.cnpm install sass-loader --save-dev

3.cnpm install node-sass --save-dev

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

Invalid options object. PostCSS Loader has been initialized using an options that dose not match the API schema.

npm i autoprefixer --save-dev

7.react 导入react-router-dom报错

react 导入 react-router-dom引入Switch报 ‘Switch‘ is not exported from ‘react-router-dom‘

react-router-dom从V5升级到V6后，有些使用做了一些改变

(1) Switch 重命名为 Routes

(2) Route 的新特性变更 ,component/render被element替代

8.将项目中webpack4升级至webpack5

依次执行以下命令：

npm install -g npm-check-updates

npm-check-updates

ncu -u

npm install

9.Webstorm终端npm报错：node‘ 或‘npm‘不是内部或外部命令,也不是可运行的程序

检查环境变量，设置NVM和Node的执行路径，并添加到Path。