Prevent the cache of files using Babel Macros (#5078)

* Add new overrides option

* Add file to package.json

* Create our own loader

* Remove overrides

* We have to use a real babel option

* Add comments

.eslintrc

@@ -7,7 +7,7 @@
     "es6": true
   },
   "parserOptions": {
-    "ecmaVersion": 6
+    "ecmaVersion": 2018
   },
   "rules": {
     "no-console": "off",

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

@@ -0,0 +1,12 @@
+/**
+ * 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

@@ -0,0 +1,32 @@
+/**
+ * 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

@@ -8,10 +8,12 @@
     "url": "https://github.com/facebook/create-react-app/issues"
   },
   "files": [
-    "index.js",
     "create.js",
     "dependencies.js",
     "dev.js",
+    "index.js",
+    "loader.js",
+    "overrides.js",
     "prod.js",
     "test.js"
   ],
@@ -29,6 +31,7 @@
     "@babel/preset-env": "7.1.0",
     "@babel/preset-flow": "7.0.0",
     "@babel/preset-react": "7.0.0",
+    "babel-loader": "8.0.2",
     "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/react-scripts/config/webpack.config.dev.js

@@ -228,7 +228,10 @@ module.exports = {
                 },
               },
               {
-                loader: require.resolve('babel-loader'),
+                // 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'),
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,

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

@@ -266,7 +266,10 @@ module.exports = {
               // improves compile time on larger projects
               require.resolve('thread-loader'),
               {
-                loader: require.resolve('babel-loader'),
+                // 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'),
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,