Add TSC_COMPILE_ON_ERROR setting (#6931)

Author: kylebebak

docusaurus/docs/adding-typescript.md

@@ -31,7 +31,7 @@ yarn add typescript @types/node @types/react @types/react-dom @types/jest
 
 Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**!
 
-Type errors will show up in the same console as the build one.
+Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, [see here](advanced-configuration.md).
 
 To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/).
 

docusaurus/docs/advanced-configuration.md

@@ -23,3 +23,4 @@ You can adjust various development and production settings by setting environmen
 | INLINE_RUNTIME_CHUNK    | 🚫 Ignored  |  ✅ Used   | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored  |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | EXTEND_ESLINT           |   ✅ Used   |  ✅ Used   | When set to `true`, ESLint configs that extend `eslint-config-react-app` will be used by `eslint-loader`. Any rules that are set to `"error"` will stop the application from building.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| TSC_COMPILE_ON_ERROR           |   ✅ Used   |  ✅ Used   | 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                       |

packages/react-dev-utils/README.md

@@ -337,6 +337,7 @@ The `args` object accepts a number of properties:
 - **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below.
 - **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm.
 - **useTypeScript** `boolean`: If `true`, TypeScript type checking will be enabled. Be sure to provide the `devSocket` argument above if this is set to `true`.
+- **tscCompileOnError** `boolean`: If `true`, errors in TypeScript type checking will not prevent start script from running app, and will not cause build script to exit unsuccessfully. Also downgrades all TypeScript type checking error messages to warning messages.
 - **webpack** `function`: A reference to the webpack constructor.
 
 ##### `prepareProxy(proxySetting: string, appPublicFolder: string): Object`

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -108,6 +108,7 @@ function createCompiler({
   urls,
   useYarn,
   useTypeScript,
+  tscCompileOnError,
   webpack,
 }) {
   // "Compiler" is a low-level interface to Webpack.
@@ -190,16 +191,28 @@ function createCompiler({
 
       const messages = await tsMessagesPromise;
       clearTimeout(delayedMsg);
-      statsData.errors.push(...messages.errors);
+      if (tscCompileOnError) {
+        statsData.warnings.push(...messages.errors);
+      } else {
+        statsData.errors.push(...messages.errors);
+      }
       statsData.warnings.push(...messages.warnings);
 
       // Push errors and warnings into compilation result
       // to show them after page refresh triggered by user.
-      stats.compilation.errors.push(...messages.errors);
+      if (tscCompileOnError) {
+        stats.compilation.warnings.push(...messages.errors);
+      } else {
+        stats.compilation.errors.push(...messages.errors);
+      }
       stats.compilation.warnings.push(...messages.warnings);
 
       if (messages.errors.length > 0) {
-        devSocket.errors(messages.errors);
+        if (tscCompileOnError) {
+          devSocket.warnings(messages.errors);
+        } else {
+          devSocket.errors(messages.errors);
+        }
       } else if (messages.warnings.length > 0) {
         devSocket.warnings(messages.warnings);
       }

packages/react-scripts/scripts/build.js

@@ -122,9 +122,17 @@ checkBrowsers(paths.appPath, isInteractive)
       );
     },
     err => {
-      console.log(chalk.red('Failed to compile.\n'));
-      printBuildError(err);
-      process.exit(1);
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(chalk.yellow(
+          'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+        ));
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
     }
   )
   .catch(err => {

packages/react-scripts/scripts/start.js

@@ -95,6 +95,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
     const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
     const urls = prepareUrls(protocol, HOST, port);
     const devSocket = {
       warnings: warnings =>
@@ -110,6 +111,7 @@ checkBrowsers(paths.appPath, isInteractive)
       urls,
       useYarn,
       useTypeScript,
+      tscCompileOnError,
       webpack,
     });
     // Load proxy config