From c1c56deda4f981c342721ca38d52f770003306e8 Mon Sep 17 00:00:00 2001 From: Kyle Bebak Date: Fri, 26 Apr 2019 03:25:05 -0500 Subject: [PATCH 1/6] Adds TSC_COMPILE_ON_ERROR env var to allow users to run and properly build TypeScript projects even if there are TypeScript type check errors --- packages/react-dev-utils/README.md | 1 + .../react-dev-utils/WebpackDevServerUtils.js | 19 ++++++++++++++++--- packages/react-scripts/scripts/build.js | 12 +++++++++--- packages/react-scripts/scripts/start.js | 2 ++ 4 files changed, 28 insertions(+), 6 deletions(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index d89dc95f667..fbafbf73850 100644 --- a/packages/react-dev-utils/README.md +++ b/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` diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 1d7021e037c..555f5a768f8 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/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); } diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index edbc6d11557..af964f6ddb1 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -122,9 +122,15 @@ 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 warnings.\n')); + printBuildError(err); + } else { + console.log(chalk.red('Failed to compile.\n')); + printBuildError(err); + process.exit(1); + } } ) .catch(err => { diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index d4726f5f67e..6c2602f04ff 100644 --- a/packages/react-scripts/scripts/start.js +++ b/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 From 1955a079d96d56c67c900aa402fb4fddbd99299b Mon Sep 17 00:00:00 2001 From: Kyle Bebak Date: Mon, 15 Jul 2019 12:01:22 -0500 Subject: [PATCH 2/6] Documents TSC_COMPILE_ON_ERROR env var; changes message printed to console when an app is built in presence of type errors --- docusaurus/docs/adding-typescript.md | 4 +++- packages/react-scripts/scripts/build.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 25380216431..78118269fc8 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -29,7 +29,9 @@ 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. By default, Create React App prevents you from running the dev server if your code has type errors. If you introduce type errors to your project, you have to fix or ignore them before you continue development. + +You can remove this restriction by running your app with the `TSC_COMPILE_ON_ERROR` environment variable set to `true`, for example, by adding `TSC_COMPILE_ON_ERROR=true` to your `.env` file. [Read more about setting environment variables here](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables). To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/). diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index af964f6ddb1..76d60d3393d 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -124,7 +124,9 @@ checkBrowsers(paths.appPath, isInteractive) err => { const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; if (tscCompileOnError) { - console.log(chalk.yellow('Compiled with warnings.\n')); + console.log(chalk.red( + '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')); From c6c9bd87af5e81bac92123ce1df21a4a83873815 Mon Sep 17 00:00:00 2001 From: Kyle Bebak Date: Thu, 8 Aug 2019 16:56:30 -0500 Subject: [PATCH 3/6] Update docusaurus/docs/adding-typescript.md Co-Authored-By: Ian Schmitz --- docusaurus/docs/adding-typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 78118269fc8..3fa3c48b798 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -31,7 +31,7 @@ Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index Type errors will show up in the same console as the build one. By default, Create React App prevents you from running the dev server if your code has type errors. If you introduce type errors to your project, you have to fix or ignore them before you continue development. -You can remove this restriction by running your app with the `TSC_COMPILE_ON_ERROR` environment variable set to `true`, for example, by adding `TSC_COMPILE_ON_ERROR=true` to your `.env` file. [Read more about setting environment variables here](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables). +You can remove this restriction by running your app with the `TSC_COMPILE_ON_ERROR` environment variable set to `true`, for example, by adding `TSC_COMPILE_ON_ERROR=true` as documented in our [advanced configuration](advanced-configuration.md). To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/). From e837044eeaaa1bd046874969a0cb65fc83b3cf9d Mon Sep 17 00:00:00 2001 From: Kyle Bebak Date: Thu, 8 Aug 2019 16:57:47 -0500 Subject: [PATCH 4/6] Print tsc errors with chalk.yellow instead of chalk.red Co-Authored-By: Ian Schmitz --- packages/react-scripts/scripts/build.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 76d60d3393d..54e0d4b82aa 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -124,7 +124,7 @@ checkBrowsers(paths.appPath, isInteractive) err => { const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; if (tscCompileOnError) { - console.log(chalk.red( + console.log(chalk.yellow( 'Compiled with the following type errors (you may want to check these before deploying your app):\n' )); printBuildError(err); From 1d86b8adcc6171eaacb7053b1d6fe5eb163cc3b8 Mon Sep 17 00:00:00 2001 From: Kyle Bebak Date: Mon, 12 Aug 2019 08:57:11 -0500 Subject: [PATCH 5/6] Document TSC_COMPILE_ON_ERROR in advanced-configuration --- docusaurus/docs/advanced-configuration.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index ab51e951b03..586fc83ac43 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/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. | From 1bedff1563ff6e817c0f444e15989c384d69b183 Mon Sep 17 00:00:00 2001 From: Kyle Bebak Date: Mon, 30 Sep 2019 10:09:01 -0500 Subject: [PATCH 6/6] Doesn't even implicitly encourage disabling TypeScript error check to run dev server --- docusaurus/docs/adding-typescript.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 2a0b22b836b..22043ca59ba 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -31,9 +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. By default, Create React App prevents you from running the dev server if your code has type errors. If you introduce type errors to your project, you have to fix or ignore them before you continue development. - -You can remove this restriction by running your app with the `TSC_COMPILE_ON_ERROR` environment variable set to `true`, for example, by adding `TSC_COMPILE_ON_ERROR=true` as documented in our [advanced configuration](advanced-configuration.md). +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/).