Merge pull request #4 from bbuckland/next

Next

Author: bbuckland

.travis.yml

@@ -9,7 +9,7 @@ cache:
  directories:
  - .npm
 before_install:
- - curl -o- -L https://yarnpkg.com/install.sh | bash
+ - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --nightly
  - export PATH="$HOME/.yarn/bin:$PATH"
 install: true
 script:
@@ -28,5 +28,8 @@ env:
  - TEST_SUITE=behavior
 matrix:
  include:
+ - os: osx
+ node_js: 8
+ env: TEST_SUITE=behavior
  - node_js: 4
  env: TEST_SUITE=old-node

CHANGELOG.md

@@ -117,7 +117,6 @@ Builds the app for production to the `build` folder.<br>
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.<br>
-By default, it also [includes a service worker](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) so that your app loads from local cache on future visits.
 
 Your app is ready to be deployed.
 
@@ -189,7 +188,7 @@ Your environment will have everything you need to build a modern single-page Rea
 * A fast interactive unit test runner with built-in support for coverage reporting.
 * A live development server that warns about common mistakes.
 * A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
-* An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria.
+* An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria. (*Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher*)
 * Hassle-free updates for the above tools with a single dependency.
 
 Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together.

README.md

@@ -2,6 +2,7 @@ image: Visual Studio 2017
 
 environment:
  APPVEYOR_SAVE_CACHE_ON_ERROR: true
+ APPVEYOR_BUILD_WORKER_CLOUD: 'GCE'
  matrix:
  - nodejs_version: 10
  test_suite: 'simple'
@@ -36,7 +37,7 @@ platform:
 install:
  - ps: Install-Product node $env:nodejs_version $env:platform
  - ps: |
- (New-Object Net.WebClient).DownloadFile("https://yarnpkg.com/latest.msi", "$env:temp\yarn.msi")
+ (New-Object Net.WebClient).DownloadFile("https://nightly.yarnpkg.com/latest.msi", "$env:temp\yarn.msi")
  cmd /c start /wait msiexec.exe /i $env:temp\yarn.msi /quiet /qn /norestart
 
 build: off

appveyor.yml

@@ -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>
@@ -25,16 +39,16 @@ Syntax error: Unterminated JSX contents (8:12)
 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 +88,58 @@ 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.
+
+./src/App.js
+Cannot find file './ThisFileSouldNotExist' in './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.
+
+./src/App.js
+Cannot find module: 'unknown-package'. Make sure this package is installed.
+
+You can install this package by running: yarn add unknown-package.
+
+
+",
+ "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').
+
+
+",
+ "stdout": "",
+}
+`;
+
+exports[`webpack message formatting formats out of scope error 1`] = `
+Object {
+ "stderr": "Creating an optimized production build...
+Failed to compile.
+
+./src/App.js
+You attempted to import ../OutOfScopeImport which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
+You can either move it inside src/, or add a symlink to it from project's node_modules/.
 
 
 ",
@@ -93,7 +153,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 install node-sass\` or \`yarn add node-sass\` inside your workspace.
 
 
 ",

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

@@ -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');
@@ -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();
  });
 
- xit('formats missing package', async () => {
- // TODO: fix me!
+ 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();
+ });
+
+ it('formats missing package', async () => {
  fs.copySync(
  path.join(__dirname, 'src', 'AppMissingPackage.js'),
  path.join(testDirectory, 'src', 'App.js')
@@ -85,4 +106,52 @@ 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();
+ });
+
+ it('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();
+ });
+
+ it('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 });
+ if (process.platform === 'darwin') {
+ expect(response.stderr).toMatch(
+ `Cannot find file: 'export5.js' does not match the corresponding name on disk: './src/Export5.js'.`
+ );
+ } else {
+ expect(response.stderr).not.toEqual(''); // TODO: figure out how we can test this on Linux/Windows
+ // I believe getting this working requires we tap into enhanced-resolve
+ // pipeline, which is debt we don't want to take on right now.
+ }
+ });
+
+ it('formats out of scope error', async () => {
+ fs.copySync(
+ path.join(__dirname, 'src', 'AppOutOfScopeImport.js'),
+ path.join(testDirectory, 'src', 'App.js')
+ );
+
+ const response = await getOutputProduction({ directory: testDirectory });
+ expect(response).toMatchSnapshot();
+ });
 });

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

@@ -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/package.json

@@ -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/AppAliasUnknownExport.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/AppIncorrectCase.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;