Add module scope plugin

packages/react-dev-utils/ModuleScopePlugin.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+'use strict';
+
+const path = require('path');
+
+class ModuleScopePlugin {
+  constructor(appSrc) {
+    this.appSrc = appSrc;
+  }
+
+  apply(resolver) {
+    const { appSrc } = this;
+    resolver.plugin('file', (request, callback) => {
+      // Unknown issuer, probably webpack internals
+      if (!request.context.issuer) {
+        return callback();
+      }
+      if (
+        // If this resolves to a node_module, we don't care what happens next
+        request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
+        // Make sure this request was manual
+        !request.__innerRequest_request
+      ) {
+        return callback();
+      }
+      // Resolve the issuer from our appSrc and make sure it's one of our files
+      // Maybe an indexOf === 0 would be better?
+      const relative = path.relative(appSrc, request.context.issuer);
+      // If we go back, not our request!
+      if (relative[0] === '.') {
+        return callback();
+      }
+      const requestRelative = path.relative(
+        appSrc,
+        path.resolve(
+          path.dirname(request.context.issuer),
+          request.__innerRequest_request
+        )
+      );
+      if (requestRelative[0] === '.') {
+        callback(
+          new Error(
+            `You attempted to require ${request.__innerRequest_request}, which falls outside of src/.`
+          ),
+          request
+        );
+      } else {
+        callback();
+      }
+    });
+  }
+}
+
+module.exports = ModuleScopePlugin;

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

@@ -18,6 +18,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -106,6 +107,7 @@ module.exports = {
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
     },
+    plugins: [new ModuleScopePlugin(paths.appSrc)],
   },
   module: {
     strictExportPresence: true,

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

@@ -18,6 +18,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -102,6 +103,7 @@ module.exports = {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
+      plugins: [new ModuleScopePlugin(paths.appSrc)],
     },
   },
   module: {