Only the first error is shown when CRA project is built

Question

In the default TypeScript based create-react-app project, only the first TS error is shown when the project is built with react-scripts but all errors are shown when running tsc.

The project was initialized with create-react-app foo --typescript and only src/index.tsx was modified after initialization:

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 shows only the first error:

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 {};

And tsc shows all errors at once:

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.

---

How can I force start and build scripts to show all errors?

Answer 1

The problem?

Here's what really happened. When fork-ts-checker-webpack-plugin finds "type errors" in your code, it adds them to webpack's compilation errors for further processing and/or logging.

When the start script from react-scripts package is executed, the same errors array is trimmed to length 1. It then shows the first error (the only error) and stops the process.

When the build script is run, it's the react-dev-utils/WebpackDevServerUtils that does the same thing internally.

---

The solution?

As pointed out by @amankkg, "you have to eject and tweak scripts/build.js file" and the build process will work the way you want it to.

The real problem is with starting a dev server since react-dev-utils/WebpackDevServerUtils is a part of node_modules and tweaking it locally is not a long-term fix. Your best bet is to fork the repo on github, make the required changes and use your forked version in your project(s).

---

Edit 1

Also, if you run the webpack config with just webpack-cli, you'd see both the errors (along with a completed build).

Just eject the code, modify webpack's config file to set webpackEnv from NODE_ENV:

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

and run the following:

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

Here's the sample output:

...

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'.

...

---

Edit 2

There is one more thing you could try. There's this node package patch-package that allows patching node_modules code locally and commits the said patch to your repo. I haven't used it but the docs explain the process pretty neatly. You should definitely check it out.