diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js
new file mode 100644
index 0000000000000000000000000000000000000000..fd70a2f408ac6df189565761ab963fa54e5eefb2
--- /dev/null
+++ b/packages/react-dev-utils/ModuleScopePlugin.js
@@ -0,0 +1,68 @@
+/**
+ * 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 chalk = require('chalk');
+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 ||
+ 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 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(
+ `You attempted to import ${chalk.cyan(request.__innerRequest_request)} which falls outside of the project ${chalk.cyan('src/')} directory. ` +
+ `Relative imports outside of ${chalk.cyan('src/')} are not supported. ` +
+ `You can either move it inside ${chalk.cyan('src/')}, or add a symlink to it from project's ${chalk.cyan('node_modules/')}.`
+ ),
+ request
+ );
+ } else {
+ callback();
+ }
+ });
+ }
+}
+
+module.exports = ModuleScopePlugin;
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index ef7204493560b006491ad60e6315061fe1b69be6..4a7effe217a515826a4c8fdcd7df5136ebb983f8 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -56,6 +56,26 @@ module.exports = {
}
```
+
+#### `new ModuleScopePlugin(appSrc: string)`
+
+This Webpack plugin ensures that relative imports from app's source directory don't reach outside of it.
+
+```js
+var path = require('path');
+var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+
+
+module.exports = {
+ // ...
+ plugins: [
+ new ModuleScopePlugin(paths.appSrc),
+ // ...
+ ],
+ // ...
+}
+```
+
#### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`
This Webpack plugin ensures `npm install <library>` forces a project rebuild.<br>
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index d52fe30fd865ede89cdfd760686b57756c0626c7..0a22499ca015bbd6540330ad85a77b5f507e9f0d 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -21,6 +21,7 @@
"getProcessForPort.js",
"InterpolateHtmlPlugin.js",
"launchEditor.js",
+ "ModuleScopePlugin.js",
"openBrowser.js",
"openChrome.applescript",
"prepareProxy.js",
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index f90ca6bd09e4cb83d478010af2b117b635f3aa07..3d198d28a34f5fe10120494f6417cd00050269f5 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/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,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: [
+ // 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,
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 182105c756a954933899db30579f2309ffdfc4bc..9742e7ff50a66a92a7f632d3b8896da7c3f4dd45 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/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');
@@ -103,6 +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: [
+ // 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,