Add comments

Author: Timer

packages/react-dev-utils/ModuleScopePlugin.js

@@ -34,17 +34,19 @@ class ModuleScopePlugin {
       // 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 it's not in src/ or a subdirectory, not our request!
       if (relative[0] === '.') {
         return callback();
       }
+      // Find path from src to the requested file
       const requestRelative = path.relative(
         appSrc,
         path.resolve(
           path.dirname(request.context.issuer),
           request.__innerRequest_request
         )
       );
+      // Error if in a parent directory of src/
       if (requestRelative[0] === '.') {
         callback(
           new Error(

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

@@ -107,7 +107,14 @@ 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)],
+    plugins: [
+      // Prevents users from importing files from outside of src/ (or node_modules/).
+      // This often causes confusion because we only process files within src/ with babel.
+      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+      // please link the files into your node_modules/ and let module-resolution kick in.
+      // Make sure your source files are compiled, as they will not be processed in any way.
+      new ModuleScopePlugin(paths.appSrc),
+    ],
   },
   module: {
     strictExportPresence: true,

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

@@ -104,7 +104,14 @@ 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)],
+    plugins: [
+      // Prevents users from importing files from outside of src/ (or node_modules/).
+      // This often causes confusion because we only process files within src/ with babel.
+      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+      // please link the files into your node_modules/ and let module-resolution kick in.
+      // Make sure your source files are compiled, as they will not be processed in any way.
+      new ModuleScopePlugin(paths.appSrc),
+    ],
   },
   module: {
     strictExportPresence: true,