Ensure files get purged when they should (#5054)

packages/react-dev-utils/getCacheIdentifier.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';
+
+module.exports = function getCacheIdentifier(environment, packages) {
+  let cacheIdentifier = `${environment}`;
+  for (const packageName of packages) {
+    cacheIdentifier += `:${packageName}@`;
+    try {
+      cacheIdentifier += require(`${packageName}/package.json`).version;
+    } catch (_) {
+      // ignored
+    }
+  }
+  return cacheIdentifier;
+};

packages/react-dev-utils/package.json

@@ -20,6 +20,7 @@
     "evalSourceMapMiddleware.js",
     "FileSizeReporter.js",
     "formatWebpackMessages.js",
+    "getCacheIdentifier.js",
     "getCSSModuleLocalIdent.js",
     "getProcessForPort.js",
     "ignoredFiles.js",

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

@@ -20,6 +20,7 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 const ManifestPlugin = require('webpack-manifest-plugin');
+const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
@@ -232,6 +233,17 @@ module.exports = {
                   // @remove-on-eject-begin
                   babelrc: 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: [
                     [
@@ -280,6 +292,14 @@ module.exports = {
                   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
                   highlightCode: true,
                 },
               },

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

@@ -23,6 +23,7 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
+const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 
 // 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.
@@ -269,6 +270,17 @@ module.exports = {
                   // @remove-on-eject-begin
                   babelrc: 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: [
                     [
@@ -310,6 +322,14 @@ module.exports = {
                   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
                   highlightCode: true,
                 },
               },