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

Question

在默认的基于 TypeScript 的 create-react-app项目，当使用 react-scripts 构建项目时，只显示第一个 TS 错误但运行 tsc 时会显示所有错误.

项目初始化为 create-react-app foo --typescript并且只有 src/index.tsx初始化后修改:

源代码/索引.tsx
源代码/索引.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"

    ]

  }

}

配置文件

{

  "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脚本来显示所有错误？

Answer 1

问题？

这是真正发生的事情。当 fork-ts-checker-webpack-plugin 在您的代码中发现“类型错误”，它将它们添加到 webpack 的 compilation errors用于进一步处理和/或记录。

当start脚本来自 react-scripts 包被执行，同样的错误数组是 trimmed to length 1 .然后显示第一个错误(唯一的错误)和 stops the process .

当build脚本运行，它是 react-dev-utils/WebpackDevServerUtils这就是 same thing内部。

解决方案？

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

真正的问题是从 react-dev-utils/WebpackDevServerUtils 开始启动开发服务器是 node_modules 的一部分，在本地调整它不是长期修复。最好的办法是在 github 上 fork 存储库，进行所需的更改并在您的项目中使用您的 fork 版本。

编辑 1

另外，如果你只用 webpack-cli 运行 webpack 配置，您会看到两个错误(以及已完成的构建)。

直接弹出代码，修改webpack的配置文件设置webpackEnv来自 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 代码并将所述补丁提交到您的存储库。我没有使用过它，但文档很好地解释了这个过程。你一定要检查一下。