diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 6417578f4a9..2546e3373c3 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -32,6 +32,18 @@ const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +// Get supported browsers list +let supportedBrowsers = require(paths.appPackageJson).browserslist; +if (!supportedBrowsers || Object.keys(supportedBrowsers).length === 0) { + // Assign default browsers when browserslist is not specified + supportedBrowsers = [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ] +} + // This is the development configuration. // It is focused on developer experience and fast rebuilds. // The production configuration is different and lives in a separate file. @@ -204,12 +216,7 @@ module.exports = { plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], + browsers: supportedBrowsers, flexbox: 'no-2009', }), ], diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 81121a94929..89848d90f8b 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -23,6 +23,18 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const paths = require('./paths'); const getClientEnvironment = require('./env'); +// Get supported browsers list +let supportedBrowsers = require(paths.appPackageJson).browserslist; +if (!supportedBrowsers || Object.keys(supportedBrowsers).length === 0) { + // Assign default browsers when browserslist is not specified + supportedBrowsers = [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ]; +} + // Webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. const publicPath = paths.servedPath; @@ -218,12 +230,7 @@ module.exports = { plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], + browsers: supportedBrowsers, flexbox: 'no-2009', }), ],