💅 Polish webpack message output

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

@@ -1,12 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`webpack message formatting formats aliased unknown export 1`] = `
+Object {
+  "stderr": "Creating an optimized production build...
+Failed to compile.
+
+./src/App.js
+Attempted import error: 'bar' is not exported from './AppUnknownExport' (imported as 'bar2').
+
+
+",
+  "stdout": "",
+}
+`;
+
 exports[`webpack message formatting formats babel syntax error 1`] = `
 Object {
   "stderr": "Creating an optimized production build...
 Failed to compile.
 
 ./src/App.js
-Syntax error: Unterminated JSX contents (8:12)
+Syntax error: Unterminated JSX contents (8:13)
 
    6 |       <div>
    7 |         <span>
@@ -22,19 +36,32 @@ Syntax error: Unterminated JSX contents (8:12)
 }
 `;
 
+exports[`webpack message formatting formats case sensitive path error 1`] = `
+Object {
+  "stderr": "Starting the development server...
+
+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\`.
+",
+  "stdout": "",
+}
+`;
+
 exports[`webpack message formatting formats css syntax error 1`] = `
 Object {
   "stderr": "Creating an optimized production build...
-Failed to compile.
-
-./src/AppCss.css
-Syntax Error: (3:2) Unexpected }
+Failed to compile.
 
-  1 | .App {
-  2 |   color: red;
-> 3 | }}
-    |  ^
-  4 | 
+./src/AppCss.css
+Syntax error: Unexpected } (3:2)
+
+  1 | .App {
+  2 |   color: red;
+> 3 | }}
+    |  ^
+  4 |
 
 
 ",
@@ -74,12 +101,39 @@ To ignore, add // eslint-disable-next-line to the line before.
 }
 `;
 
+exports[`webpack message formatting formats file not found error 1`] = `
+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'
+
+
+",
+  "stdout": "",
+}
+`;
+
 exports[`webpack message formatting formats missing package 1`] = `
 Object {
   "stderr": "Creating an optimized production build...
-Failed to compile.
-
-Module not found: Error: Can't resolve 'unknown-package' in '/private/var/folders/c3/vytj6_h56b77f_g72smntm3m0000gn/T/bf26e1d3700ad14275f6eefb5e4417c1/src'
+Failed to compile.
+
+Module not found: Error: Can't resolve 'unknown-package' in '/private/var/folders/c3/vytj6_h56b77f_g72smntm3m0000gn/T/6b5c1989bc1537c8284ff3a581876126/src'
+
+
+",
+  "stdout": "",
+}
+`;
+
+exports[`webpack message formatting formats no default export 1`] = `
+Object {
+  "stderr": "Creating an optimized production build...
+Failed to compile.
+
+./src/App.js
+Attempted import error: './ExportNoDefault' does not contain a default export (imported as 'myImport').
 
 
 ",
@@ -93,7 +147,22 @@ Object {
 Failed to compile.
 
 ./src/App.js
-1:1677-1680 './AppUnknownExport' does not contain an export named 'bar'.
+Attempted import error: 'bar' is not exported from './AppUnknownExport'.
+
+
+",
+  "stdout": "",
+}
+`;
+
+exports[`webpack message formatting helps when users tries to use sass 1`] = `
+Object {
+  "stderr": "Creating an optimized production build...
+Failed to compile.
+
+./src/AppSass.scss
+To import Sass files, you first need to install node-sass.
+Run \`npm i node-sass --save\` or \`yarn add node-sass\` inside your workspace.
 
 
 ",

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

@@ -1,4 +1,8 @@
-const { bootstrap, getOutputProduction } = require('../../utils');
+const {
+  bootstrap,
+  getOutputDevelopment,
+  getOutputProduction,
+} = require('../../utils');
 const fs = require('fs-extra');
 const path = require('path');
 const Semaphore = require('async-sema');
@@ -19,7 +23,7 @@ describe('webpack message formatting', () => {
     semaphore.release();
   });
 
-  xit('formats babel syntax error', async () => {
+  it('formats babel syntax error', async () => {
     fs.copySync(
       path.join(__dirname, 'src', 'AppBabel.js'),
       path.join(testDirectory, 'src', 'App.js')
@@ -29,8 +33,7 @@ describe('webpack message formatting', () => {
     expect(response).toMatchSnapshot();
   });
 
-  xit('formats css syntax error', async () => {
-    // TODO: fix me!
+  it('formats css syntax error', async () => {
     fs.copySync(
       path.join(__dirname, 'src', 'AppCss.js'),
       path.join(testDirectory, 'src', 'App.js')
@@ -40,8 +43,7 @@ describe('webpack message formatting', () => {
     expect(response).toMatchSnapshot();
   });
 
-  xit('formats unknown export', async () => {
-    // TODO: fix me!
+  it('formats unknown export', async () => {
     fs.copySync(
       path.join(__dirname, 'src', 'AppUnknownExport.js'),
       path.join(testDirectory, 'src', 'App.js')
@@ -51,8 +53,27 @@ describe('webpack message formatting', () => {
     expect(response).toMatchSnapshot();
   });
 
+  it('formats aliased unknown export', async () => {
+    fs.copySync(
+      path.join(__dirname, 'src', 'AppAliasUnknownExport.js'),
+      path.join(testDirectory, 'src', 'App.js')
+    );
+
+    const response = await getOutputProduction({ directory: testDirectory });
+    expect(response).toMatchSnapshot();
+  });
+
+  it('formats no default export', async () => {
+    fs.copySync(
+      path.join(__dirname, 'src', 'AppNoDefault.js'),
+      path.join(testDirectory, 'src', 'App.js')
+    );
+
+    const response = await getOutputProduction({ directory: testDirectory });
+    expect(response).toMatchSnapshot();
+  });
+
   xit('formats missing package', async () => {
-    // TODO: fix me!
     fs.copySync(
       path.join(__dirname, 'src', 'AppMissingPackage.js'),
       path.join(testDirectory, 'src', 'App.js')
@@ -85,4 +106,34 @@ describe('webpack message formatting', () => {
     const response = await getOutputProduction({ directory: testDirectory });
     expect(response).toMatchSnapshot();
   });
+
+  it('helps when users tries to use sass', async () => {
+    fs.copySync(
+      path.join(__dirname, 'src', 'AppSass.js'),
+      path.join(testDirectory, 'src', 'App.js')
+    );
+
+    const response = await getOutputProduction({ directory: testDirectory });
+    expect(response).toMatchSnapshot();
+  });
+
+  xit('formats file not found error', async () => {
+    fs.copySync(
+      path.join(__dirname, 'src', 'AppUnknownFile.js'),
+      path.join(testDirectory, 'src', 'App.js')
+    );
+
+    const response = await getOutputProduction({ directory: testDirectory });
+    expect(response).toMatchSnapshot();
+  });
+
+  xit('formats case sensitive path error', async () => {
+    fs.copySync(
+      path.join(__dirname, 'src', 'AppIncorrectCase.js'),
+      path.join(testDirectory, 'src', 'App.js')
+    );
+
+    const response = await getOutputDevelopment({ directory: testDirectory });
+    expect(response).toMatchSnapshot();
+  });
 });

fixtures/output/webpack-message-formatting/package.json

@@ -1,9 +1,7 @@
 {
   "dependencies": {
-    "node-sass": "4.x",
     "react": "latest",
-    "react-dom": "latest",
-    "react-scripts": "latest"
+    "react-dom": "latest"
   },
   "browserslist": [
     ">0.2%"

fixtures/output/webpack-message-formatting/src/AppAliasUnknownExport.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { bar as bar2 } from './AppUnknownExport';
+
+class App extends Component {
+  componentDidMount() {
+    bar2();
+  }
+  render() {
+    return <div />;
+  }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppIncorrectCase.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import five from './export5';
+
+class App extends Component {
+  render() {
+    return <div className="App">{five}</div>;
+  }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppNoDefault.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import myImport from './ExportNoDefault';
+
+class App extends Component {
+  render() {
+    return <div className="App">{myImport}</div>;
+  }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppSass.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import './AppSass.scss';
+
+class App extends Component {
+  render() {
+    return <div className="App" />;
+  }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppSass.scss

@@ -0,0 +1,3 @@
+.App {
+  color: red;
+}

fixtures/output/webpack-message-formatting/src/AppUnknownFile.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import DefaultExport from './ThisFileSouldNotExist';
+
+class App extends Component {
+  render() {
+    return <div className="App" />;
+  }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/Export5.js

@@ -0,0 +1 @@
+export default 5;

fixtures/output/webpack-message-formatting/src/ExportNoDefault.js

@@ -0,0 +1 @@
+export const six = 6;

fixtures/smoke/boostrap-sass/package.json

@@ -3,7 +3,6 @@
     "bootstrap": "4.x",
     "node-sass": "4.x",
     "react": "latest",
-    "react-dom": "latest",
-    "react-scripts": "latest"
+    "react-dom": "latest"
   }
 }

fixtures/smoke/builds-with-multiple-runtimes/package.json

@@ -3,7 +3,6 @@
     "dva": "2.4.0",
     "ky": "0.3.0",
     "react": "latest",
-    "react-dom": "latest",
-    "react-scripts": "latest"
+    "react-dom": "latest"
   }
 }

fixtures/smoke/graphql-with-mjs/package.json

@@ -4,7 +4,6 @@
     "graphql": "14.0.2",
     "react-apollo": "2.2.1",
     "react": "latest",
-    "react-dom": "latest",
-    "react-scripts": "latest"
+    "react-dom": "latest"
   }
 }

fixtures/smoke/relative-paths/package.json

@@ -1,6 +1,4 @@
 {
-  "dependencies": {
-    "react-scripts": "latest"
-  },
+  "dependencies": {},
   "homepage": "."
 }