TSC_COMPILE_ON_ERROR flag to continue running the app despite errors

[es-lynn]

Currently, the React app refuses to render if there is even one Typescript compilation errors or ESLint errors. This is extremely frustrating during development because on certain projects, it refuses to render because of some ESLint rule that requires 2 spaces instead of 3.

CRA supports passing in a flag TSC_COMPILE_ON_ERROR, where it still allows you to run your app even though there are Typescript or ESLint errors.

---

https://create-react-app.dev/docs/advanced-configuration/

When set to true, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.

---

It would be great if react_app_rewired could implement a similar functionality to forward this flag.

[dawnmist]

Have you tried it? As far as I knew, environment variables should be being passed straight through to the underlying react-scripts process that does the compilation. i.e. It should 'just work'.

How are you setting the environment variable - and what OS are you using (as Windows has a different procedure for environment variables on the command line compared to the others)?

Have you tried specifying this in your project's '.env' file (or '.env.development' if you only want this in dev mode)?

[es-lynn]

With create-react-app, I'm using the following script:

TSC_COMPILE_ON_ERROR=true PORT=3080 react-scripts start

Errors show up in the browser console, but the web application is still rendered.

---

With react-app-rewired, I'm using the following script:

TSC_COMPILE_ON_ERROR=true PORT=3080 react-app-rewired start

Errors prevent the web application from rendering.

---

In both of the above scripts, the PORT envvar is successfully forwarded.

For reference, I'm using a Mac on both.

[dawnmist]

I have been testing this on a new project.

The problem is that the environment variable does not disable eslint checking, only the typescript type checking. The errors you are getting are eslint ones, and by adding an eslint rule that conflicts with the initial files created by create-react-app I am getting both react-scripts and react-app-rewired throwing the eslint error I created.

Example repository: https://github.com/dawnmist/react-app-rewired-test-520

Package.json file has 2 scripts to compare behaviour:

    "start": "TSC_COMPILE_ON_ERROR=true react-scripts start",
    "start:rar": "TSC_COMPILE_ON_ERROR=true react-app-rewired start",

Both scripts result in the eslint errors being thrown & stopping the page from displaying.

The documentation at https://create-react-app.dev/docs/advanced-configuration/ specifies that this disables typescript type errors only, it does not mention anything about eslint.

The environment variable is being set, and is getting through into the react-scripts compilation properly. You can verify this yourself by opening the file node_modules/react-scripts/scripts/start.js and on line 105 (immediately after the line that refers to process.env.TSC_COMPILE_ON_ERROR) add:

// log value that was set in line 104
console.log(`tscCompileOnError = ${tscCompileOnError}`);
// exit script so that you get to read the log
process.exit(1)

If you run both scripts with this snippet, you'll see the following output:

$> yarn start
yarn run vXXXX
$ TSC_COMPILE_ON_ERROR=true react-scripts start
tscCompileOnError = true
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$> yarn start:rar
yarn run vXXXX
$ TSC_COMPILE_ON_ERROR=true react-app-rewired start
tscCompileOnError = true
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Remember to remove those lines from node_modules/react-scripts/scripts/start.js after you've done the test, as the exit line will stop the script from running.