Allow importing package.json (#2468)

* Allow importing package.json * Remove package.json import from App.js template * fix importing package.json * Rename variable to reflect path is relative to root * Check for both package & package.json in ModuleScopePlugin * Use regex to check relative path to package.json * Strictly enforce package.json extension on scope plugin * Add allowedPaths to ModuleScopePlugin ctor and use it to allow app package.json * Remove package.json import from App.js template * Add package.json to react-scripts/template, show package version and name in the template * Remove import package.json from template * Remove template/package.json and its references in code * Update ModuleScopePlugin.js * Update README.md
JohnNilsson · Aug 9, 2017 · e0ddefb · e0ddefb
1 parent 052d2fa
commit e0ddefb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js
@@ -13,8 +13,9 @@ const chalk = require('chalk');
 const path = require('path');
 
 class ModuleScopePlugin {
-  constructor(appSrc) {
+  constructor(appSrc, allowedFiles = []) {
     this.appSrc = appSrc;
+    this.allowedFiles = new Set(allowedFiles);
   }
 
   apply(resolver) {
@@ -40,15 +41,16 @@ class ModuleScopePlugin {
       if (relative.startsWith('../') || relative.startsWith('..\\')) {
         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
-        )
+      const requestFullPath = path.resolve(
+        path.dirname(request.context.issuer),
+        request.__innerRequest_request
       );
+      if (this.allowedFiles.has(requestFullPath)) {
+        return callback();
+      }
+      // Find path from src to the requested file
       // Error if in a parent directory of src/
+      const requestRelative = path.relative(appSrc, requestFullPath);
       if (
         requestRelative.startsWith('../') ||
         requestRelative.startsWith('..\\')

diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
@@ -57,7 +57,7 @@ module.exports = {
 ```
 
 
-#### `new ModuleScopePlugin(appSrc: string)`
+#### `new ModuleScopePlugin(appSrc: string, allowedFiles?: string[])`
 
 This Webpack plugin ensures that relative imports from app's source directory don't reach outside of it.
 
@@ -71,7 +71,7 @@ module.exports = {
   resolve: {
     // ...
     plugins: [
-      new ModuleScopePlugin(paths.appSrc),
+      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
       // ...
     ],
     // ...

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
@@ -126,7 +126,7 @@ module.exports = {
       // 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),
+      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
     ],
   },
   module: {

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
@@ -126,7 +126,7 @@ module.exports = {
       // 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),
+      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
     ],
   },
   module: {