diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c9d5ae0b295..90b290e6a75 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -29,7 +29,15 @@ const publicPath = '/'; const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); - +// Application package.json +const pkg = require(paths.appPackageJson); +// An array property in the apps package.json called "transpileDependencies" +const transpileModules = pkg.transpileDependencies || []; +// The list of packages in node_modules that babel will include in it's transpile. +const babelInclude = [ + paths.appSrc, + ...transpileModules.map(m => path.resolve(paths.appNodeModules, m)), +]; // 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. @@ -163,7 +171,7 @@ module.exports = { // Process JS with Babel. { test: /\.(js|jsx|mjs)$/, - include: paths.appSrc, + include: babelInclude, loader: require.resolve('babel-loader'), options: { // @remove-on-eject-begin diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3b2a2068db2..48650ffc2c7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -35,6 +35,15 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; const publicUrl = publicPath.slice(0, -1); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +// Application package.json +const pkg = require(paths.appPackageJson); +// An array property in the apps package.json called "transpileDependencies" +const transpileModules = pkg.transpileDependencies || []; +// The list of packages in node_modules that babel will include in it's transpile. +const babelInclude = [ + paths.appSrc, + ...transpileModules.map(m => path.resolve(paths.appNodeModules, m)), +]; // Assert this just to be safe. // Development builds of React are slow and not intended for production. @@ -170,7 +179,7 @@ module.exports = { // Process JS with Babel. { test: /\.(js|jsx|mjs)$/, - include: paths.appSrc, + include: babelInclude, loader: require.resolve('babel-loader'), options: { // @remove-on-eject-begin