Switch back to babel-loader (#5143)

* Switch back to babel-loader

* Preserve existing caller options. Use Object.assign instead of object spread.

* Updated filename in package.json

* Update comment about cache identifier

* Update macro check to use a regex

* Move macro check regex out of function

packages/babel-preset-react-app/loader.js

-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';
-
-const loader = require('babel-loader');
-const overrides = require('./overrides');
-
-module.exports = loader.custom(() => overrides);

packages/babel-preset-react-app/overrides.js

-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';
-
-const crypto = require('crypto');
-
-module.exports = {
-  // This function transforms the Babel configuration on a per-file basis
-  config(config, { source }) {
-    // Babel Macros are notoriously hard to cache, so they shouldn't be
-    // https://github.com/babel/babel/issues/8497
-    // We naively detect macros using their package suffix and insert a random
-    // caller name, a valid option accepted by Babel, to compose a one-time
-    // cacheIdentifier for the file. We cannot tune the loader options on a per
-    // file basis.
-    if (source.indexOf('.macro') !== -1 || source.indexOf('/macro') !== -1) {
-      return {
-        ...config.options,
-        caller: {
-          name: `babel-preset-react-app:${crypto
-            .randomBytes(32)
-            .toString('hex')}`,
-        },
-      };
-    }
-    return config.options;
-  },
-};

packages/babel-preset-react-app/package.json

@@ -12,8 +12,7 @@
     "dependencies.js",
     "dev.js",
     "index.js",
-    "loader.js",
-    "overrides.js",
+    "webpack-overrides.js",
     "prod.js",
     "test.js"
   ],
@@ -31,7 +30,7 @@
     "@babel/preset-flow": "7.0.0",
     "@babel/preset-react": "7.0.0",
     "@babel/runtime": "7.0.0",
-    "babel-loader": "8.0.2",
+    "babel-loader": "8.0.4",
     "babel-plugin-macros": "2.4.2",
     "babel-plugin-transform-dynamic-import": "2.1.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.18"

packages/babel-preset-react-app/webpack-overrides.js

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+const crypto = require('crypto');
+
+const macroCheck = new RegExp('[./]macro');
+
+module.exports = function() {
+  return {
+    // This function transforms the Babel configuration on a per-file basis
+    config(config, { source }) {
+      // Babel Macros are notoriously hard to cache, so they shouldn't be
+      // https://github.com/babel/babel/issues/8497
+      // We naively detect macros using their package suffix and add a random token
+      // to the caller, a valid option accepted by Babel, to compose a one-time
+      // cacheIdentifier for the file. We cannot tune the loader options on a per
+      // file basis.
+      if (macroCheck.test(source)) {
+        return Object.assign({}, config.options, {
+          caller: Object.assign({}, config.options.caller, {
+            craInvalidationToken: crypto.randomBytes(32).toString('hex'),
+          }),
+        });
+      }
+      return config.options;
+    },
+  };
+};

packages/react-error-overlay/package.json

@@ -36,7 +36,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",
-    "babel-loader": "8.0.2",
+    "babel-loader": "8.0.4",
     "babel-preset-react-app": "^4.0.0",
     "chalk": "^2.3.2",
     "chokidar": "^2.0.2",

packages/react-scripts/config/webpack.config.dev.js

@@ -218,11 +218,11 @@ module.exports = {
                 },
               },
               {
-                // We need to use our own loader until `babel-loader` supports
-                // customization
-                // https://github.com/babel/babel-loader/pull/687
-                loader: require.resolve('babel-preset-react-app/loader'),
+                loader: require.resolve('babel-loader'),
                 options: {
+                  customize: require.resolve(
+                    'babel-preset-react-app/webpack-overrides'
+                  ),
                   // @remove-on-eject-begin
                   babelrc: false,
                   configFile: false,

packages/react-scripts/config/webpack.config.prod.js

@@ -272,8 +272,11 @@ module.exports = {
                 // We need to use our own loader until `babel-loader` supports
                 // customization
                 // https://github.com/babel/babel-loader/pull/687
-                loader: require.resolve('babel-preset-react-app/loader'),
+                loader: require.resolve('babel-loader'),
                 options: {
+                  customize: require.resolve(
+                    'babel-preset-react-app/webpack-overrides'
+                  ),
                   // @remove-on-eject-begin
                   babelrc: false,
                   configFile: false,

packages/react-scripts/package.json

@@ -26,7 +26,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",
-    "babel-loader": "8.0.2",
+    "babel-loader": "8.0.4",
     "babel-plugin-named-asset-import": "^0.2.0",
     "babel-preset-react-app": "^4.0.0",
     "bfj": "6.1.1",