diff --git a/fixtures/output/webpack-message-formatting/index.test.js b/fixtures/output/webpack-message-formatting/index.test.js index 26f7a3678c0..985caaffde6 100644 --- a/fixtures/output/webpack-message-formatting/index.test.js +++ b/fixtures/output/webpack-message-formatting/index.test.js @@ -19,7 +19,7 @@ describe('webpack message formatting', () => { semaphore.release(); }); - it('formats babel syntax error', async () => { + xit('formats babel syntax error', async () => { fs.copySync( path.join(__dirname, 'src', 'AppBabel.js'), path.join(testDirectory, 'src', 'App.js') diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 2561ade86dd..517a19fe08f 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -218,115 +218,80 @@ module.exports = { { test: /\.(js|jsx)$/, include: paths.appSrc, - use: [ - // This loader parallelizes code compilation, it is optional but - // improves compile time on larger projects - { - loader: require.resolve('thread-loader'), - options: { - poolTimeout: Infinity, // keep workers alive for more effective watch mode - // Forwards the process args (such as --require) to the child - // workers. Ensures that the worker operates in the same kind - // of environment than the current one (important in case a - // preloaded script modifies the env) - workerNodeArgs: process.execArgv, - }, - }, - { - loader: require.resolve('babel-loader'), - options: { - customize: require.resolve( - 'babel-preset-react-app/webpack-overrides' - ), - // @remove-on-eject-begin - babelrc: false, - configFile: false, - presets: [require.resolve('babel-preset-react-app')], - // Make sure we have a unique cache identifier, erring on the - // side of caution. - // We remove this when the user ejects because the default - // is sane and uses Babel options. Instead of options, we use - // the react-scripts and babel-preset-react-app versions. - cacheIdentifier: getCacheIdentifier('development', [ - 'babel-plugin-named-asset-import', - 'babel-preset-react-app', - 'react-dev-utils', - 'react-scripts', - ]), - // @remove-on-eject-end - plugins: [ - [ - require.resolve('babel-plugin-named-asset-import'), - { - loaderMap: { - svg: { - ReactComponent: - '@svgr/webpack?-prettier,-svgo![path]', - }, - }, + loader: require.resolve('babel-loader'), + options: { + customize: require.resolve( + 'babel-preset-react-app/webpack-overrides' + ), + // @remove-on-eject-begin + babelrc: false, + configFile: false, + presets: [require.resolve('babel-preset-react-app')], + // Make sure we have a unique cache identifier, erring on the + // side of caution. + // We remove this when the user ejects because the default + // is sane and uses Babel options. Instead of options, we use + // the react-scripts and babel-preset-react-app versions. + cacheIdentifier: getCacheIdentifier('development', [ + 'babel-plugin-named-asset-import', + 'babel-preset-react-app', + 'react-dev-utils', + 'react-scripts', + ]), + // @remove-on-eject-end + plugins: [ + [ + require.resolve('babel-plugin-named-asset-import'), + { + loaderMap: { + svg: { + ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', }, - ], - ], - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in ./node_modules/.cache/babel-loader/ - // directory for faster rebuilds. - cacheDirectory: true, - // Don't waste time on Gzipping the cache - cacheCompression: false, - }, - }, - ], + }, + }, + ], + ], + // This is a feature of `babel-loader` for webpack (not Babel itself). + // It enables caching results in ./node_modules/.cache/babel-loader/ + // directory for faster rebuilds. + cacheDirectory: true, + // Don't waste time on Gzipping the cache + cacheCompression: false, + }, }, // Process any JS outside of the app with Babel. // Unlike the application JS, we only compile the standard ES features. { test: /\.js$/, exclude: /@babel(?:\/|\\{1,2})runtime/, - use: [ - // This loader parallelizes code compilation, it is optional but - // improves compile time on larger projects - { - loader: require.resolve('thread-loader'), - options: { - poolTimeout: Infinity, // keep workers alive for more effective watch mode - // Forwards the process args (such as --require) to the child - // workers. Ensures that the worker operates in the same kind - // of environment than the current one (important in case a - // preloaded script modifies the env) - workerNodeArgs: process.execArgv, - }, - }, - { - loader: require.resolve('babel-loader'), - options: { - babelrc: false, - configFile: false, - compact: false, - presets: [ - [ - require.resolve('babel-preset-react-app/dependencies'), - { helpers: true }, - ], - ], - cacheDirectory: true, - // Don't waste time on Gzipping the cache - cacheCompression: false, - // @remove-on-eject-begin - cacheIdentifier: getCacheIdentifier('development', [ - 'babel-plugin-named-asset-import', - 'babel-preset-react-app', - 'react-dev-utils', - 'react-scripts', - ]), - // @remove-on-eject-end - // If an error happens in a package, it's possible to be - // because it was compiled. Thus, we don't want the browser - // debugger to show the original code. Instead, the code - // being evaluated would be much more helpful. - sourceMaps: false, - }, - }, - ], + loader: require.resolve('babel-loader'), + options: { + babelrc: false, + configFile: false, + compact: false, + presets: [ + [ + require.resolve('babel-preset-react-app/dependencies'), + { helpers: true }, + ], + ], + cacheDirectory: true, + // Don't waste time on Gzipping the cache + cacheCompression: false, + // @remove-on-eject-begin + cacheIdentifier: getCacheIdentifier('development', [ + 'babel-plugin-named-asset-import', + 'babel-preset-react-app', + 'react-dev-utils', + 'react-scripts', + ]), + // @remove-on-eject-end + // If an error happens in a package, it's possible to be + // because it was compiled. Thus, we don't want the browser + // debugger to show the original code. Instead, the code + // being evaluated would be much more helpful. + sourceMaps: false, + }, }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index a45cec6a0fd..8207bf4fe90 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -283,111 +283,79 @@ module.exports = { { test: /\.(js|jsx)$/, include: paths.appSrc, - use: [ - // This loader parallelizes code compilation, it is optional but - // improves compile time on larger projects - { - loader: require.resolve('thread-loader'), - options: { - // Forwards the process args (such as --require) to the child - // workers. Ensures that the worker operates in the same kind - // of environment than the current one (important in case a - // preloaded script modifies the env) - workerNodeArgs: process.execArgv, - }, - }, - { - loader: require.resolve('babel-loader'), - options: { - customize: require.resolve( - 'babel-preset-react-app/webpack-overrides' - ), - // @remove-on-eject-begin - babelrc: false, - configFile: false, - presets: [require.resolve('babel-preset-react-app')], - // Make sure we have a unique cache identifier, erring on the - // side of caution. - // We remove this when the user ejects because the default - // is sane and uses Babel options. Instead of options, we use - // the react-scripts and babel-preset-react-app versions. - cacheIdentifier: getCacheIdentifier('production', [ - 'babel-plugin-named-asset-import', - 'babel-preset-react-app', - 'react-dev-utils', - 'react-scripts', - ]), - // @remove-on-eject-end - plugins: [ - [ - require.resolve('babel-plugin-named-asset-import'), - { - loaderMap: { - svg: { - ReactComponent: - '@svgr/webpack?-prettier,-svgo![path]', - }, - }, + + loader: require.resolve('babel-loader'), + options: { + customize: require.resolve( + 'babel-preset-react-app/webpack-overrides' + ), + // @remove-on-eject-begin + babelrc: false, + configFile: false, + presets: [require.resolve('babel-preset-react-app')], + // Make sure we have a unique cache identifier, erring on the + // side of caution. + // We remove this when the user ejects because the default + // is sane and uses Babel options. Instead of options, we use + // the react-scripts and babel-preset-react-app versions. + cacheIdentifier: getCacheIdentifier('production', [ + 'babel-plugin-named-asset-import', + 'babel-preset-react-app', + 'react-dev-utils', + 'react-scripts', + ]), + // @remove-on-eject-end + plugins: [ + [ + require.resolve('babel-plugin-named-asset-import'), + { + loaderMap: { + svg: { + ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', }, - ], - ], - cacheDirectory: true, - // Save disk space when time isn't as important - cacheCompression: true, - compact: true, - }, - }, - ], + }, + }, + ], + ], + cacheDirectory: true, + // Save disk space when time isn't as important + cacheCompression: true, + compact: true, + }, }, // Process any JS outside of the app with Babel. // Unlike the application JS, we only compile the standard ES features. { test: /\.js$/, exclude: /@babel(?:\/|\\{1,2})runtime/, - use: [ - // This loader parallelizes code compilation, it is optional but - // improves compile time on larger projects - { - loader: require.resolve('thread-loader'), - options: { - // Forwards the process args (such as --require) to the child - // workers. Ensures that the worker operates in the same kind - // of environment than the current one (important in case a - // preloaded script modifies the env) - workerNodeArgs: process.execArgv, - }, - }, - { - loader: require.resolve('babel-loader'), - options: { - babelrc: false, - configFile: false, - compact: false, - presets: [ - [ - require.resolve('babel-preset-react-app/dependencies'), - { helpers: true }, - ], - ], - cacheDirectory: true, - // Save disk space when time isn't as important - cacheCompression: true, - // @remove-on-eject-begin - cacheIdentifier: getCacheIdentifier('production', [ - 'babel-plugin-named-asset-import', - 'babel-preset-react-app', - 'react-dev-utils', - 'react-scripts', - ]), - // @remove-on-eject-end - // If an error happens in a package, it's possible to be - // because it was compiled. Thus, we don't want the browser - // debugger to show the original code. Instead, the code - // being evaluated would be much more helpful. - sourceMaps: false, - }, - }, - ], + loader: require.resolve('babel-loader'), + options: { + babelrc: false, + configFile: false, + compact: false, + presets: [ + [ + require.resolve('babel-preset-react-app/dependencies'), + { helpers: true }, + ], + ], + cacheDirectory: true, + // Save disk space when time isn't as important + cacheCompression: true, + // @remove-on-eject-begin + cacheIdentifier: getCacheIdentifier('production', [ + 'babel-plugin-named-asset-import', + 'babel-preset-react-app', + 'react-dev-utils', + 'react-scripts', + ]), + // @remove-on-eject-end + // If an error happens in a package, it's possible to be + // because it was compiled. Thus, we don't want the browser + // debugger to show the original code. Instead, the code + // being evaluated would be much more helpful. + sourceMaps: false, + }, }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 3fd1bfd1251..7170e4ff98b 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -59,7 +59,6 @@ "sass-loader": "7.1.0", "style-loader": "0.23.0", "terser-webpack-plugin": "1.1.0", - "thread-loader": "1.2.0", "url-loader": "1.1.1", "webpack": "4.19.1", "webpack-dev-server": "3.1.9",