diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 1fb14a82ba1..22043ca59ba 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/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/). 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. | diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 3011d8286d0..d0399fd8c72 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 8d74e8cf131..d43f141c387 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..54e0d4b82aa 100644 --- a/packages/react-scripts/scripts/build.js +++ b/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 => { 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