From e5aca1bbfabe9b911057df5276caedd7518b51ee Mon Sep 17 00:00:00 2001
From: David <david.aghassi@gmail.com>
Date: Sat, 22 Jan 2022 22:35:14 -0800
Subject: [PATCH 1/2] feature: allow for custom error messaging in
 ModuleScopePlugin

This is purely related to https://github.com/facebook/create-react-app/discussions/11977 as a proof of concept for what I'm proposing. It would allow folks who directly use this webpack plugin to customize the error output. Broader use of this error through other means in CRA would need more development.
---
 packages/react-dev-utils/ModuleScopePlugin.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js
index e2c16ffd819..9a20e1fba01 100644
--- a/packages/react-dev-utils/ModuleScopePlugin.js
+++ b/packages/react-dev-utils/ModuleScopePlugin.js
@@ -12,10 +12,11 @@ const path = require('path');
 const os = require('os');
 
 class ModuleScopePlugin {
-  constructor(appSrc, allowedFiles = []) {
+  constructor(appSrc, allowedFiles = [], errorMessage) {
     this.appSrcs = Array.isArray(appSrc) ? appSrc : [appSrc];
     this.allowedFiles = new Set(allowedFiles);
     this.allowedPaths = [...allowedFiles].map(path.dirname).filter(p => path.relative(p, process.cwd()) !== '');
+    this.errorMessage = errorMessage;
   }
 
   apply(resolver) {
@@ -70,8 +71,7 @@ class ModuleScopePlugin {
             );
           })
         ) {
-          const scopeError = new Error(
-            `You attempted to import ${chalk.cyan(
+          const message = !!this.errorMessage ? this.errorMessage : `You attempted to import ${chalk.cyan(
               request.__innerRequest_request
             )} which falls outside of the project ${chalk.cyan(
               'src/'
@@ -85,7 +85,7 @@ class ModuleScopePlugin {
               )}, or add a symlink to it from project's ${chalk.cyan(
                 'node_modules/'
               )}.`
-          );
+          const scopeError = new Error(message);
           Object.defineProperty(scopeError, '__module_scope_plugin', {
             value: true,
             writable: false,

From 3bea88c4db5f5f5c80d9e34729ffacbc3832bedc Mon Sep 17 00:00:00 2001
From: David <david.aghassi@gmail.com>
Date: Tue, 25 Jan 2022 05:17:24 +0000
Subject: [PATCH 2/2] refactor: eslint and formatting

---
 packages/react-dev-utils/ModuleScopePlugin.js | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js
index 9a20e1fba01..2cd20313f0d 100644
--- a/packages/react-dev-utils/ModuleScopePlugin.js
+++ b/packages/react-dev-utils/ModuleScopePlugin.js
@@ -12,10 +12,12 @@ const path = require('path');
 const os = require('os');
 
 class ModuleScopePlugin {
-  constructor(appSrc, allowedFiles = [], errorMessage) {
+  constructor(appSrc, allowedFiles = [], errorMessage = '') {
     this.appSrcs = Array.isArray(appSrc) ? appSrc : [appSrc];
     this.allowedFiles = new Set(allowedFiles);
-    this.allowedPaths = [...allowedFiles].map(path.dirname).filter(p => path.relative(p, process.cwd()) !== '');
+    this.allowedPaths = [...allowedFiles]
+      .map(path.dirname)
+      .filter(p => path.relative(p, process.cwd()) !== '');
     this.errorMessage = errorMessage;
   }
 
@@ -55,9 +57,11 @@ class ModuleScopePlugin {
         if (this.allowedFiles.has(requestFullPath)) {
           return callback();
         }
-        if (this.allowedPaths.some((allowedFile) => {
-          return requestFullPath.startsWith(allowedFile);
-        })) {
+        if (
+          this.allowedPaths.some(allowedFile => {
+            return requestFullPath.startsWith(allowedFile);
+          })
+        ) {
           return callback();
         }
         // Find path from src to the requested file
@@ -71,20 +75,23 @@ class ModuleScopePlugin {
             );
           })
         ) {
-          const message = !!this.errorMessage ? this.errorMessage : `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.` +
-              os.EOL +
-              `You can either move it inside ${chalk.cyan(
-                'src/'
-              )}, or add a symlink to it from project's ${chalk.cyan(
-                'node_modules/'
-              )}.`
+          const message =
+            this.errorMessage.length > 0
+              ? this.errorMessage
+              : `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.` +
+                os.EOL +
+                `You can either move it inside ${chalk.cyan(
+                  'src/'
+                )}, or add a symlink to it from project's ${chalk.cyan(
+                  'node_modules/'
+                )}.`;
           const scopeError = new Error(message);
           Object.defineProperty(scopeError, '__module_scope_plugin', {
             value: true,