diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 7f0189c6fc2..1d9a3b37eaf 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. You will no longer see any ESLint warnings or errors in the console or terminal. | | 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-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index eddca1b0707..9f38c95fcd2 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 shouldUseESLintPlugin = process.env.ESLINT_BUILD_ON_ERROR !== 'true'; + const imageInlineSizeLimit = parseInt( process.env.IMAGE_INLINE_SIZE_LIMIT || '10000' ); @@ -750,25 +752,26 @@ module.exports = function (webpackEnv) { // The formatter is invoked directly in WebpackDevServerUtils during development formatter: isEnvProduction ? typescriptFormatter : undefined, }), - new ESLintPlugin({ - // Plugin options - extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'], - formatter: require.resolve('react-dev-utils/eslintFormatter'), - eslintPath: require.resolve('eslint'), - context: paths.appSrc, - cache: true, - // ESLint class options - cwd: paths.appPath, - resolvePluginsRelativeTo: __dirname, - baseConfig: { - extends: [require.resolve('eslint-config-react-app/base')], - rules: { - ...(!hasJsxRuntime && { - 'react/react-in-jsx-scope': 'error', - }), + shouldUseESLintPlugin && + new ESLintPlugin({ + // Plugin options + extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'], + formatter: require.resolve('react-dev-utils/eslintFormatter'), + eslintPath: require.resolve('eslint'), + context: paths.appSrc, + cache: true, + // ESLint class options + cwd: paths.appPath, + resolvePluginsRelativeTo: __dirname, + baseConfig: { + extends: [require.resolve('eslint-config-react-app/base')], + rules: { + ...(!hasJsxRuntime && { + 'react/react-in-jsx-scope': 'error', + }), + }, }, - }, - }), + }), ].filter(Boolean), // Some libraries import Node modules but don't use them in the browser. // Tell webpack to provide empty mocks for them so importing them works. diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index de2ff505eb3..431e35d966b 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -126,6 +126,7 @@ checkBrowsers(paths.appPath, isInteractive) ); }, err => { + // NOTE: This means builds won't exit on ESLint errors too. const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; if (tscCompileOnError) { console.log(