diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 7f0189c6fc2..beef372d763 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -26,4 +26,5 @@ You can adjust various development and production settings by setting environmen | 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. | | FAST_REFRESH | ✅ Used | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page. | | 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. | +| ESLINT_BUILD_ON_ERROR | ✅ Used | ✅ Used | When set to `true`, you can run and build projects even if there are ESLint errors. This works by treating all ESLint errors as warnings. | | DISABLE_NEW_JSX_TRANSFORM | ✅ Used | ✅ Used | When set to `true`, disables the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) introduced in React 17 and backported to React 16.14.0, 15.7.0, and 0.14.10. New projects will use a version of React that supports this by default but you may need to disable it in existing projects if you can't upgrade React. | diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js index 47b111f7568..fcbb22d4e89 100644 --- a/packages/react-dev-utils/eslintFormatter.js +++ b/packages/react-dev-utils/eslintFormatter.js @@ -14,6 +14,8 @@ const table = require('text-table'); const cwd = process.cwd(); +const emitErrorsAsWarnings = process.env.ESLINT_BUILD_ON_ERROR === 'true'; + function isError(message) { if (message.fatal || message.severity === 2) { return true; @@ -69,7 +71,10 @@ function formatter(results) { // add color to rule keywords messages.forEach(m => { - m[4] = m[2] === 'error' ? chalk.red(m[4]) : chalk.yellow(m[4]); + m[4] = + m[2] === 'error' && !emitErrorsAsWarnings + ? chalk.red(m[4]) + : chalk.yellow(m[4]); m.splice(2, 1); }); @@ -87,7 +92,7 @@ function formatter(results) { output += `${outputTable}\n\n`; }); - if (reportContainsErrorRuleIDs) { + if (reportContainsErrorRuleIDs && !emitErrorsAsWarnings) { // Unlike with warnings, we have to do it here. // We have similar code in react-scripts for warnings, // but warnings can appear in multiple files so we only diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 502736ead11..f26b312fd2c 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -55,6 +55,8 @@ const reactRefreshOverlayEntry = require.resolve( // makes for a smoother build process. const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; +const emitErrorsAsWarnings = process.env.ESLINT_BUILD_ON_ERROR === 'true'; + const imageInlineSizeLimit = parseInt( process.env.IMAGE_INLINE_SIZE_LIMIT || '10000' ); @@ -755,6 +757,7 @@ module.exports = function (webpackEnv) { extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'], formatter: require.resolve('react-dev-utils/eslintFormatter'), eslintPath: require.resolve('eslint'), + emitWarning: emitErrorsAsWarnings, context: paths.appSrc, cache: true, cacheLocation: path.resolve(