时间戳

首页 > 解决方案 > 构建 CRA 项目时仅显示第一个错误

webpack - 构建 CRA 项目时仅显示第一个错误

问题描述

在默认的基于 TypeScript 的create-react-app项目中，在构建项目时仅显示第一个 TS 错误，react-scripts但在运行时显示所有错误tsc。

该项目是用初始化的create-react-app foo --typescript，只有src/index.tsx在初始化后才被修改：

src/index.tsx src/index.tsx

console.log(typeof nonExistentVar);
    console.log(typeof nonExistentVar);
console.log(typeof nonExistentVar2);
    console.log(typeof nonExistentVar2);
export {};

包.json

export {};
{


  "name": "foo",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@types/jest": "24.0.15",

    "@types/node": "12.6.8",

    "@types/react": "16.8.23",

    "@types/react-dom": "16.8.5",

    "react": "^16.8.6",

    "react-dom": "^16.8.6",

    "react-scripts": "3.0.1",

    "typescript": "3.5.3"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  }

}

tsconfig.json

{

  "compilerOptions": {

    "target": "es5",

    "lib": [

      "dom",

      "dom.iterable",

      "esnext"

    ],

    "allowJs": true,

    "skipLibCheck": true,

    "esModuleInterop": true,

    "allowSyntheticDefaultImports": true,

    "strict": true,

    "forceConsistentCasingInFileNames": true,

    "module": "esnext",

    "moduleResolution": "node",

    "resolveJsonModule": true,

    "isolatedModules": true,

    "noEmit": true,

    "jsx": "preserve"

  },

  "include": [

    "src"

  ]

}

npm start仅显示第一个错误：

Failed to compile.

C:/foo/src/index.tsx
TypeScript error in C:/foo/src/index.tsx(1,20):
Cannot find name 'nonExistentVar'.  TS2304

  > 1 | console.log(typeof nonExistentVar);
      |                    ^
    2 | console.log(typeof nonExistentVar2);
    3 | export {};

并tsc一次显示所有错误：

src/index.tsx:1:20 - error TS2304: Cannot find name 'nonExistentVar'.

1 console.log(typeof nonExistentVar);
                     ~~~~~~~~~~~~~~

src/index.tsx:2:20 - error TS2304: Cannot find name 'nonExistentVar2'.

2 console.log(typeof nonExistentVar2);
                     ~~~~~~~~~~~~~~~


Found 2 errors.

如何强制start和build脚本显示所有错误？

标签： webpackcreate-react-appreact-scripts

解决方案

问题？

这就是真正发生的事情。当fork-ts-checker-webpack-plugin在你的代码中发现“类型错误”时，它会将它们添加到 webpack 的编译错误中，以便进一步处理和/或记录。

当执行包中的start脚本时react-scripts，相同的错误数组被修剪为长度 1。然后它显示第一个错误（唯一的错误）并停止该过程。

当build脚本运行时，它在内部react-dev-utils/WebpackDevServerUtils做同样的事情。

解决方案？

正如@amankkg所指出的，“您必须弹出并调整scripts/build.js文件”，并且构建过程将按照您希望的方式进行。

真正的问题在于启动开发服务器，因为react-dev-utils/WebpackDevServerUtils它是 node_modules 的一部分，并且在本地对其进行调整不是长期解决方案。您最好的选择是在 github 上分叉存储库，进行所需的更改并在您的项目中使用您的分叉版本。

编辑 1

此外，如果您使用 just 运行 webpack 配置webpack-cli，您会看到两个错误（以及完成的构建）。

只需弹出代码，修改 webpack 的配置文件以设置webpackEnvfrom NODE_ENV：

module.exports = function(webpackEnv) {
  webpackEnv = webpackEnv || process.env.NODE_ENV    //// add this line
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';

并运行以下命令：

npm i -g webpack-cli
NODE_ENV=development webpack --config config/webpack.config.js

这是示例输出：

...

Entrypoint main = static/js/bundle.js ...

ERROR in /foo/src/index.tsx
ERROR in /foo/src/index.tsx(14,20):
TS2304: Cannot find name 'nonExistentVar'.

ERROR in /foo/src/index.tsx
ERROR in /foo/src/index.tsx(15,20):
TS2304: Cannot find name 'nonExistentVar2'.

...

编辑 2

您还可以尝试一件事。有这个节点包patch-package允许在本地修补 node_modules 代码并将所述补丁提交到您的存储库。我没有使用过它，但是文档很好地解释了这个过程。你一定要检查一下。

推荐阅读