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

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('..\\')

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]),
       // ...
     ],
     // ...

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

@@ -117,7 +117,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: {

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

@@ -117,7 +117,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: {