Format file not found error and catch module scope plugin error

fixtures/output/webpack-message-formatting/__snapshots__/index.test.js.snap

@@ -43,7 +43,7 @@ Object {
 Failed to compile.
 
 ./src/App.js
-Module not found: \`/private/var/folders/c3/vytj6_h56b77f_g72smntm3m0000gn/T/4654404388655bb36ea2f1a7fa9ca174/src/export5.js\` does not match the corresponding path on disk \`Export5.js\`.
+Module not found: Error: [CaseSensitivePathsPlugin] \`/private/var/folders/c3/vytj6_h56b77f_g72smntm3m0000gn/T/c2500b126b76bdcdcc34acd482835b9f/src/export5.js\` does not match the corresponding path on disk \`Export5.js\`.
 ",
   "stdout": "",
 }
@@ -106,7 +106,8 @@ Object {
   "stderr": "Creating an optimized production build...
 Failed to compile.
 
-Module not found: Error: Can't resolve './ThisFileSouldNotExist' in '/private/var/folders/c3/vytj6_h56b77f_g72smntm3m0000gn/T/70b07b626476276cde42eea49620873c/src'
+./src/App.js
+Cannot find file './ThisFileSouldNotExist' in './src'.
 
 
 ",

fixtures/output/webpack-message-formatting/index.test.js

@@ -117,7 +117,7 @@ describe('webpack message formatting', () => {
     expect(response).toMatchSnapshot();
   });
 
-  xit('formats file not found error', async () => {
+  it('formats file not found error', async () => {
     fs.copySync(
       path.join(__dirname, 'src', 'AppUnknownFile.js'),
       path.join(testDirectory, 'src', 'App.js')
@@ -127,7 +127,7 @@ describe('webpack message formatting', () => {
     expect(response).toMatchSnapshot();
   });
 
-  xit('formats case sensitive path error', async () => {
+  it('formats case sensitive path error', async () => {
     fs.copySync(
       path.join(__dirname, 'src', 'AppIncorrectCase.js'),
       path.join(testDirectory, 'src', 'App.js')

packages/react-dev-utils/ModuleNotFoundPlugin.js

@@ -17,6 +17,7 @@ class ModuleNotFoundPlugin {
     this.yarnLockFile = yarnLockFile;
 
     this.useYarnCommand = this.useYarnCommand.bind(this);
+    this.getRelativePath = this.getRelativePath.bind(this);
     this.prettierError = this.prettierError.bind(this);
   }
 
@@ -28,24 +29,31 @@ class ModuleNotFoundPlugin {
     }
   }
 
-  prettierError(err) {
-    const { details: _details, origin } = err;
-
-    // Format the file to be a relative path (if possible)
-    let file = path.relative(this.appPath, origin.resource);
+  getRelativePath(_file) {
+    let file = path.relative(this.appPath, _file);
     if (file.startsWith('..')) {
-      file = origin.resource;
+      file = _file;
     } else if (!file.startsWith('.')) {
       file = '.' + path.sep + file;
     }
+    return file;
+  }
+
+  prettierError(err) {
+    let { details: _details = '', origin } = err;
 
+    const file = this.getRelativePath(origin.resource);
     let details = _details.split('\n');
-    const isModule = details[1] && /module/.test(details[1]);
+
     const request = /resolve '(.*?)' in '(.*?)'/.exec(details);
     if (request) {
-      const isYarn = this.useYarnCommand();
-      const [, target] = request;
+      const isModule = details[1] && /module/.test(details[1]);
+      const isFile = details[1] && /file/.test(details[1]);
+
+      let [, target, context] = request;
+      context = this.getRelativePath(context);
       if (isModule) {
+        const isYarn = this.useYarnCommand();
         details = [
           `Cannot find module: '${target}'. Make sure this package is installed.`,
           '',
@@ -55,13 +63,21 @@ class ModuleNotFoundPlugin {
               : chalk.bold(`npm install ${target}`)) +
             '.',
         ];
+      } else if (isFile) {
+        details = [`Cannot find file '${target}' in '${context}'.`];
       } else {
         details = [err.message];
       }
     } else {
       details = [err.message];
     }
     err.message = [file, ...details].join('\n').replace('Error: ', '');
+
+    const isModuleScopePluginError =
+      err.error && err.error.__module_scope_plugin;
+    if (isModuleScopePluginError) {
+      err.message = err.message.replace('Module not found: ', '');
+    }
     return err;
   }
 

packages/react-dev-utils/ModuleScopePlugin.js

@@ -9,6 +9,7 @@
 
 const chalk = require('chalk');
 const path = require('path');
+const os = require('os');
 
 class ModuleScopePlugin {
   constructor(appSrc, allowedFiles = []) {
@@ -63,24 +64,28 @@ class ModuleScopePlugin {
             );
           })
         ) {
-          callback(
-            new Error(
-              `You attempted to import ${chalk.cyan(
-                request.__innerRequest_request
-              )} which falls outside of the project ${chalk.cyan(
+          const scopeError = 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/'
-              )} 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
+              )} 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/'
+              )}.`
           );
+          Object.defineProperty(scopeError, '__module_scope_plugin', {
+            value: true,
+            writable: false,
+            enumerable: false,
+          });
+          callback(scopeError, request);
         } else {
           callback();
         }