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

Question

在默认基于 TypeScript 的 create-react-app 项目中，使用 react-scripts 构建项目时仅显示第一个 TS 错误，但在运行 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 {};

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

Answer 1

问题？

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

当执行来自react-scripts 包的start 脚本时，相同的错误数组是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 代码并将所述补丁提交到您的 repo。我没有使用过它，但是文档很好地解释了这个过程。你一定要看看。