From dafb9ab0d82cf95d3d7a12918324b5479e599928 Mon Sep 17 00:00:00 2001
From: Jonny Buchanan <jonathan.buchanan@gmail.com>
Date: Sun, 4 Apr 2021 19:22:34 +1000
Subject: [PATCH] Update Babel to 7.13 Update Karma to 6.x Update Webpack to
 5.x and update all loaders Finally dropped PhantomJS - Karma tests now use
 ChromeHeadless by default

Internal

-Babel config changes
  - Set the configured browserslist the new top-level option in Babel 7.13, instead of in @babel/preset-env's options
  - Drop the useESModules option for @babel/plugin-transform-runtime, which was deprecated in Babel 7.13
  - Removed harcoded use of @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator as Webpack 5 can now parse these

- Karma config changes
  - karma-webpack 5.x now requires 'webpack' to be listed in frameworks config
  - Karma Server now requires a config object to be passed through a parseConfig() call
  - Shim the global process variable in the test Webpack config, as one of expect's dependencies uses it

- Webpack 5 config changes
  - Set optimization.nodeEnv = false to prevent webpack defining process.env.NODE_ENV via DefinePlugin to prevent a new warning from DefinePlugin about this conflicting with the value nwb sets
  - Removed optimization.noEmitOnErrors
  - postcss-loader now expects options in a postCssOptions object and no longer needs an ident option
  - optimization.splitChunks.cacheGroups.vendors was renamed to defaultVendors
  - Fix Webpack devtool config in Karma config
  - Replace optimize-css-assets-webpack-plugin with css-minimizer-webpack-plugin to avoid a deprecation warning
  - Source is no longer available from the Webpack stats object, calculate gzip file sizes from the output assets instead
  - Use Source.source() when inlining the runtime chunk into generated HTML and remove the new default defer attribute from its script
  - Remove removed watchOptions option
  - Remove removed logLeval option for webpack middleware - use stats: 'none' instead
  - Stopped forcing process.env.NODE_ENV to 'test' before running a Karma server, as DefinePlugin was creating conflicting values warnings
  - Fix serve config so it's not using a fixed output filename (causes an error when used in express middleware)
  - Don't set NODE_ENV to test when running tests (fixes DefinePlugin warning with express middleware test)
  - Stats messages are now objects
---
 CHANGES.md                                    |  98 +++++++---
 docs/BrowserSupport.md                        |   2 +-
 docs/Configuration.md                         |  16 +-
 docs/Features.md                              |   2 +-
 docs/Testing.md                               |   6 +-
 docs/guides/ReactApps.md                      |   2 +-
 docs/guides/ReactComponents.md                | 178 ++++++++++--------
 flow-typed/libdefs.js                         |   2 +-
 package.json                                  | 115 ++++++-----
 src/appCommands.js                            |   6 +-
 src/commands/build-demo.js                    |   2 +-
 src/commands/serve-react-demo.js              |   2 +-
 src/createBabelConfig.js                      |  29 ++-
 src/createKarmaConfig.js                      |  32 ++--
 src/createProject.js                          |   4 +-
 src/createWebpackConfig.js                    |  35 ++--
 src/devServer.js                              |   3 -
 src/expressMiddleware.js                      |   5 +-
 src/karmaServer.js                            |   4 +-
 src/quickCommands.js                          |   8 +-
 src/webpackUtils.js                           |  23 +--
 tests/commands/build-test.js                  |   2 +-
 tests/commands/new-init-test.js               |   2 +-
 tests/commands/projects-test.js               |  12 +-
 tests/createBabelConfig-test.js               |  40 +---
 tests/createKarmaConfig-test.js               |  31 ++-
 .../projects/router-app/src/routes/root.js    |  12 +-
 27 files changed, 333 insertions(+), 340 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index eee74164..11b8bbe5 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,30 +1,78 @@
+# Unreleased (in `master`)
+
+## Breaking Changes
+
+- Updated to Webpack 5 and updated all plugins and loaders - custom configuration for any of these could now be invalid.
+
+- Dropped use of PhantomJS - the default browser for Karma testing is now `ChromeHeadless` and Chrome must be available wherever tests are going to be run.
+
+## Changes
+
+- Updated to Babel 7.13
+- Updated to Karma 6 and Mocha 8
+
 ## Dependencies
 
-- @babel/cli: v7.8.4 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7102-2020-05-30)
-- @babel/core: v7.9.6 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7102-2020-05-30)
-- @babel/plugin-proposal-nullish-coalescing-operator: v7.8.3 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/plugin-proposal-optional-chaining: v7.9.0 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @babel/plugin-syntax-jsx: v7.8.3 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/plugin-transform-react-constant-elements: v7.9.0 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/plugin-transform-react-jsx: v7.9.4 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @babel/plugin-transform-runtime: v7.9.6 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @babel/polyfill: v7.8.7 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/preset-env: v7.9.6 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @babel/preset-flow: v7.9.0 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/preset-react: v7.9.4 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/runtime: v7.9.6 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @pmmmwh/react-refresh-webpack-plugin: v0.3.1 → [v0.3.3](https://github.com/pmmmwh/react-refresh-webpack-plugin/releases)
-- autoprefixer: v9.8.0 → [v9.8.4](https://github.com/postcss/autoprefixer/blob/master/CHANGELOG.md#984)
-- babel-plugin-inferno: v6.1.0 → v6.1.1
-- chalk: v4.0.0 → [v4.1.0](https://github.com/chalk/chalk/releases/tag/v4.1.0)
-- copy-webpack-plugin: v6.0.1 → [v6.0.2](https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/CHANGELOG.md#602-2020-06-03)
-- cross-spawn: v7.0.2 → [v7.0.3](https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md#703-2020-05-25)
-- css-loader: v3.5.3 → [v3.6.0](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#360-2020-06-13)
-- fs-extra: v9.0.0 → [v9.0.1](https://github.com/jprichardson/node-fs-extra/blob/master/CHANGELOG.md#901--2020-06-03)
-- inquirer: v7.1.0 → [v7.2.0](https://github.com/SBoudrias/Inquirer.js/releases/tag/inquirer%407.2.0)
-- karma: v5.0.9 → [v5.1.0](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md#510-2020-06-11)
-- react-refresh: v0.8.2 → [v0.8.3](https://github.com/facebook/react/commits/3ca1904b37ad1f527ff5e31b51373caea67478c5/packages/react-refresh)
-- terser-webpack-plugin: v3.0.1 → [v3.0.6](https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/CHANGELOG.md#306-2020-06-18)
+### Added
+
+- css-minimizer-webpack-plugin v1.3.0
+- postcss v8.2.9
+
+### Changed
+
+- @babel/cli: v7.10.3 → v7.13.14
+- @babel/core: v7.10.3 → v7.13.14
+- @babel/plugin-syntax-jsx: v7.10.1 → v7.12.13
+- @babel/plugin-transform-react-constant-elements: v7.10.1 → v7.13.13
+- @babel/plugin-transform-react-jsx: v7.10.3 → v7.13.12
+- @babel/plugin-transform-runtime: v7.10.3 → v7.13.10
+- @babel/preset-env: v7.10.3 → v7.13.12
+- @babel/preset-react: v7.10.1 → v7.13.13
+- @babel/runtime: v7.10.3 → v7.13.10
+- @pmmmwh/react-refresh-webpack-plugin: v0.3.3 → v0.4.3
+- autoprefixer: v9.8.4 → v10.2.5
+- babel-loader: v8.1.0 → v8.2.2
+- babel-plugin-add-module-exports: v1.0.2 → v1.0.4
+- babel-preset-proposals: v0.3.0 → v0.4.0
+- case-sensitive-paths-webpack-plugin: v2.3.0 → v2.4.0
+- copy-webpack-plugin: v6.0.2 → v8.1.0
+- cross-env: v7.0.2 → v7.0.3
+- css-loader: v3.6.0 → v5.2.0
+- debug: v4.1.1 → v4.3.1
+- file-loader: v6.0.0 → v6.2.0
+- fs-extra: v9.0.1 → v9.1.0
+- gzip-size: v5.1.1 → v6.0.0
+- html-webpack-plugin: v4.3.0 → v5.3.1
+- inquirer: v7.2.0 → v8.0.0
+- karma: v5.1.0 → v6.3.2
+- karma-coverage: v2.0.2 → v2.0.3
+- karma-sourcemap-loader: v0.3.7 → v0.3.8
+- karma-webpack: v4.0.2 → v5.0.0
+- mini-css-extract-plugin: v0.9.0 → v1.4.0
+- mocha: v7.1.2 → v8.3.2
+- open: v7.0.4 → v8.0.5
+- ora: v4.0.4 → v5.4.0
+- postcss-loader: v3.0.0 → v5.2.0
+- react-refresh: v0.8.3 → v0.10.0
+- resolve: v1.17.0 → v1.20.0
+- run-series: v1.1.8 → v1.1.9
+- semver: v7.3.2 → v7.3.5
+- style-loader: v1.2.1 → v2.0.0
+- terser-webpack-plugin: v3.0.6 → v5.1.1
+- url-loader: v4.1.0 → v4.1.1
+- webpack: v4.43.0 → v5.30.0
+- webpack-dev-middleware: v3.7.2 → v4.1.0
+- webpack-dev-server: v3.11.0 → v3.11.2
+
+### Removed
+
+- @babel/plugin-proposal-optional-chaining (only used to avoid a Webpack 4 parser bug)
+- @babel/plugin-proposal-nullish-coalescing-operator (only used to avoid a Webpack 4 parser bug)
+- @babel/polyfill (no longer required for PhantomJS)
+- babel-plugin-transform-decorators-legacy (obsolete, was no longer being used)
+- karma-phantomjs-launcher (dropped PhantomJS)
+- optimize-css-assets-webpack-plugin (replaced by css-minimizer-webpack-plugin)
+- phantomjs-prebuilt (dropped PhantomJS)
 
 # 0.25.2 / 2020-05-20
 
diff --git a/docs/BrowserSupport.md b/docs/BrowserSupport.md
index b1aab0d5..8839244b 100644
--- a/docs/BrowserSupport.md
+++ b/docs/BrowserSupport.md
@@ -13,7 +13,7 @@ nwb uses the following [Browserslist](https://github.com/browserslist/browsersli
 
 These are used to configure:
 
-- [`@babel/preset-env`'s `targets` option](https://babeljs.io/docs/en/babel-preset-env#targets), so it only transpiles the necessary ECMAScript 2015+ for supported browsers.
+- [Babel's `targets` option](https://babeljs.io/docs/en/options#targets), so it only transpiles the necessary ECMAScript 2015+ for supported browsers.
 - [Autoprefixer's `overrideBrowserslist` option](https://github.com/postcss/autoprefixer#options), so it only includes the necessary CSS prefixes for supported browsers.
 
 ### Configuring Browser Support
diff --git a/docs/Configuration.md b/docs/Configuration.md
index 70ea885e..1b32cbd9 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -598,7 +598,7 @@ Set to `false` to disable extraction of `.css` files in builds (in which case [`
 
 ##### `html`: `Object`
 
-Configures [options for `HtmlWebpackPlugin`](https://github.com/ampedandwired/html-webpack-plugin#readme).
+Configures [options for `HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin#readme).
 
 For apps, nwb will look for a `src/index.html` template to inject `<link>` and `<script>` tags into for CSS and JavaScript bundles generated by Webpack.
 
@@ -946,21 +946,11 @@ Karma configuration can be provided in a `karma` object, using the following pro
 
 ##### `browsers`: `Array<String | Plugin>`
 
-> Default: `['PhantomJS']`
+> Default: `['ChromeHeadless']`
 
 A list of browsers to run tests in.
 
-PhantomJS is the default as it's installed by default with nwb and should be able to run in any environment.
-
-The launcher plugin for Chrome is also included, so if you want to run tests in Chrome, you can just name it:
-
-```js
-module.exports = {
-  karma: {
-    browsers: ['Chrome']
-  }
-}
-```
+The launcher plugiun for Chrome is included with nwb, but requires that you have a version of Chrome installed in the environment the tests will be run in.
 
 For other browsers, you will also need to supply a plugin and manage that dependency yourself:
 
diff --git a/docs/Features.md b/docs/Features.md
index 98e7578e..9e58d458 100644
--- a/docs/Features.md
+++ b/docs/Features.md
@@ -21,7 +21,7 @@
 
 **Testing:**
 
-- Run unit tests with Karma in PhantomJS, using [Mocha](https://mochajs.org/) and [Expect](https://github.com/mjackson/expect#expect1x-documentation), without any configuration.
+- Run unit tests with Karma in headless Chrome, using [Mocha](https://mochajs.org/) and [Expect](https://github.com/mjackson/expect#expect1x-documentation), without any configuration.
 - Flexible defaults allow tests to be organised using a number of naming schemes, with tests in a separate directory, co-located with the code, or both.
 - Code coverage reporting.
 - Project skeletons ready to run tests on Travis CI and post code coverage results to Coveralls/codecov.io.
diff --git a/docs/Testing.md b/docs/Testing.md
index 8bc6a8ee..24da49ff 100644
--- a/docs/Testing.md
+++ b/docs/Testing.md
@@ -22,7 +22,7 @@ nwb uses [Karma](http://karma-runner.github.io/) as a test runner, with [Webpack
 
 #### Browsers
 
-Karma runs tests in Phantom JS, which is installed automatically with nwb.
+Karma runs tests in Chrome, which must be installed on the machine the tests are running on.
 
 > To configure this, provide [`karma.browsers` config](/docs/Configuration.md#browsers-string--arrayplugin)
 
@@ -134,10 +134,6 @@ module.exports = {
 
 **Note:** if you provide `karma.testContext` and your tests would not have been picked up by the [default test files][#test-files] config, you will also need to provide a suitable [`karma.testFiles` config](/docs/Configuration.md#testcontext-string) so your tests can be excluded from code coverage.
 
-#### Automatic Babel Polyfill
-
-A context module is commonly used to load polyfills to allow tests to run in browsers missing certain features, but you don't need to worry about that if you were just going to use `@babel/polyfill` - nwb automatically injects Babel's polyfill into Karma tests for you.
-
 #### Configuring Testing Libraries
 
 Use a context module you need to configure testing libraries before running any tests. E.g. if you're using [Enzyme](https://github.com/airbnb/enzyme) to test some React code...
diff --git a/docs/guides/ReactApps.md b/docs/guides/ReactApps.md
index b7bdd434..a2ba194a 100644
--- a/docs/guides/ReactApps.md
+++ b/docs/guides/ReactApps.md
@@ -249,7 +249,7 @@ You can [view the live version of the app here](http://insin.github.io/nwb-think
 
 ## Testing
 
-nwb provides a default testing setup which uses Karma to run tests written with Mocha and Expect in the headless PhantomJS browser.
+nwb provides a default testing setup which uses Karma to run tests written with Mocha and Expect in a headless Chrome browser.
 
 > The [Testing documentation](/docs/Testing.md) provides an in-depth overview of what nwb's default testing setup provides (and how to configure things to your liking if you want to), but we'll stick to the defaults and repurpose the initial test in the `tests/` directory to test the `ProductTable` component.
 
diff --git a/docs/guides/ReactComponents.md b/docs/guides/ReactComponents.md
index c5058092..4b8b63d9 100644
--- a/docs/guides/ReactComponents.md
+++ b/docs/guides/ReactComponents.md
@@ -49,13 +49,13 @@ You'll be asked a few questions about your project's build configuration.
 
 > **Note:** If you want to skip these questions, you can pass an `-f` or `--force` flag to accept the default configuration, or just keep bashing `Enter` to accept the defaults.
 >
-> If you want to skip *reading* about these questions, continue on to [Project Layout](#project-layout).
+> If you want to skip _reading_ about these questions, continue on to [Project Layout](#project-layout).
 
 ### Build Configuration Questions
 
 By default, nwb will create a CommonJS build for your project in `lib/`, which is the primary way it will be used when installed via npm, with default `package.json` `main` config pointing to `lib/index.js`.
 
-Configuration questions are asked about *additional* builds
+Configuration questions are asked about _additional_ builds
 
 #### ECMAScript Modules Build
 
@@ -76,7 +76,7 @@ It's enabled by default, so we can just hit `Enter` to accept the default:
 
 > **Note:** nwb will create an ES modules build in `es/` when we build the project later.
 >
->It will also add `"module"` configuration to `package.json`, for use by ES module bundlers.
+> It will also add `"module"` configuration to `package.json`, for use by ES module bundlers.
 
 #### Universal Module Definition (UMD) Build
 
@@ -150,14 +150,14 @@ cd react-loading-button/
 
 `package.json` is configured with `"scripts"` we can use with `npm run` while developing the project.
 
-Command | Description |
---- | ---
-`npm start` | start a development server for the demo app
-`npm test` | run tests
-`npm run test:coverage` | run tests and produce a code coverage report in `coverage/`
-`npm run test:watch` | start a test server and re-run tests on every change
-`npm run build` | prepare for publishing to npm
-`npm run clean` | delete built resources
+| Command                 | Description                                                 |
+| ----------------------- | ----------------------------------------------------------- |
+| `npm start`             | start a development server for the demo app                 |
+| `npm test`              | run tests                                                   |
+| `npm run test:coverage` | run tests and produce a code coverage report in `coverage/` |
+| `npm run test:watch`    | start a test server and re-run tests on every change        |
+| `npm run build`         | prepare for publishing to npm                               |
+| `npm run clean`         | delete built resources                                      |
 
 The initial project is set up so you can successfully run each of these commands and get some meaningful output, albeit for a component which does nothing more than render a welcome message.
 
@@ -173,9 +173,9 @@ Running `npm start` will start a development server for the demo app. Every time
 
 If there are any errors, they will be displayed in both the console and the browser, so you're unlikely to miss them while developing.
 
-Console Error | Browser Error
-:---: | :---:
-![](resources/react-component-serve-error-console.png) | ![](resources/react-component-serve-error-browser.png)
+|                     Console Error                      |                     Browser Error                      |
+| :----------------------------------------------------: | :----------------------------------------------------: |
+| ![](resources/react-component-serve-error-console.png) | ![](resources/react-component-serve-error-browser.png) |
 
 Developing components against a hot-reloading app provides a quick feedback loop.
 
@@ -188,80 +188,84 @@ Let's start by imagining how we'll use our `LoadingButton` component in the demo
 > Don't sweat the details of if you're not familiar with this; the most important thing for this guide is the `render()` method.
 
 ```js
-import React, {Component} from 'react'
-import {render} from 'react-dom'
+import React, { Component } from "react";
+import { render } from "react-dom";
 
-import LoadingButton from '../../src'
+import LoadingButton from "../../src";
 
 class Demo extends Component {
-  state = {loading: false}
+  state = { loading: false };
 
   handleToggleLoading = () => {
-    this.setState({loading: !this.state.loading})
-  }
+    this.setState({ loading: !this.state.loading });
+  };
 
   render() {
-    return <div>
-      <h1>react-loading-button Demo</h1>
-
-      <h2>Static</h2>
-      <LoadingButton>Load</LoadingButton>
-      <LoadingButton loading>Loading</LoadingButton>
-
-      <h2>Dynamic</h2>
-      <LoadingButton loading={this.state.loading}>
-        {this.state.loading ? 'Loading' : 'Load'}
-      </LoadingButton>
-      <button type="button" onClick={this.handleToggleLoading}>
-        Toggle Loading
-      </button>
-    </div>
+    return (
+      <div>
+        <h1>react-loading-button Demo</h1>
+
+        <h2>Static</h2>
+        <LoadingButton>Load</LoadingButton>
+        <LoadingButton loading>Loading</LoadingButton>
+
+        <h2>Dynamic</h2>
+        <LoadingButton loading={this.state.loading}>
+          {this.state.loading ? "Loading" : "Load"}
+        </LoadingButton>
+        <button type="button" onClick={this.handleToggleLoading}>
+          Toggle Loading
+        </button>
+      </div>
+    );
   }
 }
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<Demo />, document.querySelector("#demo"));
 ```
 
-Once your component is developed, the demo app falls back to its primary purpose of creating a demo you can deploy when publishing your code *without* having to build and publish separately, as component builds and demo bundles are built from the same source at the same time.
+Once your component is developed, the demo app falls back to its primary purpose of creating a demo you can deploy when publishing your code _without_ having to build and publish separately, as component builds and demo bundles are built from the same source at the same time.
 
 ## Implementation
 
 Here's an example implementation of the `LoadingButton` component:
 
 ```js
-import t from 'prop-types'
-import React, {Component} from 'react'
+import t from "prop-types";
+import React, { Component } from "react";
 
 class LoadingButton extends Component {
   static propTypes = {
     disabled: t.bool,
     loading: t.bool,
     type: t.string,
-  }
+  };
   static defaultProps = {
     disabled: false,
     loading: false,
-    type: 'button',
-  }
+    type: "button",
+  };
   render() {
-    let {children, disabled, loading, type, ...props} = this.props
+    let { children, disabled, loading, type, ...props } = this.props;
     if (loading) {
-      disabled = true
+      disabled = true;
     }
-    return <button disabled={disabled} type={type} {...props}>
-      {children}
-    </button>
+    return (
+      <button disabled={disabled} type={type} {...props}>
+        {children}
+      </button>
+    );
   }
 }
 
-export default LoadingButton
+export default LoadingButton;
 ```
 
 ![](resources/react-component-demo.gif)
 
 ## Testing
 
-nwb provides a default testing setup which uses Karma to run tests written with Mocha and Expect in the headless PhantomJS browser.
+nwb provides a default testing setup which uses Karma to run tests written with Mocha and Expect in the a headless Chrome browser.
 
 > The [Testing documentation](/docs/Testing.md) provides an in-depth overview of what nwb's default testing setup provides (and how to configure things to your liking if you want to), but we'll stick to editing the initial test provided in the React component project skeleton, in `tests/index.test.js`.
 
@@ -276,30 +280,38 @@ The following example tests were implemented after the `LoadingButton` component
 > **Note 2:** We're importing the [expect](https://github.com/mjackson/expect/) library below, but it's not included in `package.json` - nwb handles the expect dependency for you so you can get started with testing without having to make a decision. Other assertion and spy libraries are available :)
 
 ```js
-import expect from 'expect'
-import React from 'react'
-import {renderToStaticMarkup as render} from 'react-dom/server'
+import expect from "expect";
+import React from "react";
+import { renderToStaticMarkup as render } from "react-dom/server";
 
-import LoadingButton from 'src/'
+import LoadingButton from "src/";
 
-describe('LoadingButton', () => {
+describe("LoadingButton", () => {
   it('renders a button with type="button"', () => {
-    expect(render(<LoadingButton>Test</LoadingButton>))
-      .toContain('<button type="button">Test</button>')
-  })
-  it('disables the button when loading=true', () => {
-    expect(render(<LoadingButton loading>Test</LoadingButton>))
-      .toContain('<button disabled="" type="button">Test</button>')
-  })
-  it('disables the button when loading=true even if disabled=false', () => {
-    expect(render(<LoadingButton disabled={false} loading>Test</LoadingButton>))
-      .toContain('<button disabled="" type="button">Test</button>')
-  })
-  it('passes other props through', () => {
-    expect(render(<LoadingButton className="test">Test</LoadingButton>))
-      .toContain('<button type="button" class="test">Test</button>')
-  })
-})
+    expect(render(<LoadingButton>Test</LoadingButton>)).toContain(
+      '<button type="button">Test</button>'
+    );
+  });
+  it("disables the button when loading=true", () => {
+    expect(render(<LoadingButton loading>Test</LoadingButton>)).toContain(
+      '<button disabled="" type="button">Test</button>'
+    );
+  });
+  it("disables the button when loading=true even if disabled=false", () => {
+    expect(
+      render(
+        <LoadingButton disabled={false} loading>
+          Test
+        </LoadingButton>
+      )
+    ).toContain('<button disabled="" type="button">Test</button>');
+  });
+  it("passes other props through", () => {
+    expect(
+      render(<LoadingButton className="test">Test</LoadingButton>)
+    ).toContain('<button type="button" class="test">Test</button>');
+  });
+});
 ```
 
 ### Code Coverage Reporting
@@ -312,7 +324,7 @@ Code coverage percentages on their own are fairly meaningless, but running cover
 
 ![](resources/react-component-test-coverage-html.png)
 
-This HTML report is handy for finding out what your tests *aren't* covering, and deciding which uncovered areas you'd feel more comfortable having some tests for.
+This HTML report is handy for finding out what your tests _aren't_ covering, and deciding which uncovered areas you'd feel more comfortable having some tests for.
 
 ### Continuous Integration (CI) Testing
 
@@ -365,11 +377,11 @@ To make this easier, by default nwb enables Babel proposal plugins for export ex
 For example, this is a snippet of how [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap) re-exports its components using `export default from` statements:
 
 ```js
-export Accordion from './Accordion'
-export Alert from './Alert'
-export Badge from './Badge'
-export Breadcrumb from './Breadcrumb'
-export BreadcrumbItem from './BreadcrumbItem'
+export Accordion from "./Accordion";
+export Alert from "./Alert";
+export Badge from "./Badge";
+export Breadcrumb from "./Breadcrumb";
+export BreadcrumbItem from "./BreadcrumbItem";
 ```
 
 ## Build Configuration
@@ -390,14 +402,14 @@ e.g. if your component uses React Router, you'll also need to map the 'react-rou
 module.exports = {
   npm: {
     umd: {
-      global: 'ReactSomeComponent',
+      global: "ReactSomeComponent",
       externals: {
-        'react': 'React',
-        'react-router': 'ReactRouter'
-      }
-    }
-  }
-}
+        react: "React",
+        "react-router": "ReactRouter",
+      },
+    },
+  },
+};
 ```
 
 ### Feature Toggles
diff --git a/flow-typed/libdefs.js b/flow-typed/libdefs.js
index 96c23ac6..8ed8ea28 100644
--- a/flow-typed/libdefs.js
+++ b/flow-typed/libdefs.js
@@ -8,7 +8,7 @@ declare module 'fs-extra' {  declare module.exports: any;  }
 declare module 'html-webpack-plugin' {  declare module.exports: any;  }
 declare module 'mini-css-extract-plugin' {  declare module.exports: any;  }
 declare module '@insin/npm-install-webpack-plugin' {  declare module.exports: any;  }
-declare module 'optimize-css-assets-webpack-plugin' {  declare module.exports: any;  }
+declare module 'css-minimizer-webpack-plugin' { declare module.exports: any;  }
 declare module 'ora' {  declare module.exports: any;  }
 declare module 'resolve' {  declare module.exports: any;  }
 declare module 'terser-webpack-plugin' {  declare module.exports: any;  }
diff --git a/package.json b/package.json
index bfbb76e8..b549a00b 100644
--- a/package.json
+++ b/package.json
@@ -30,88 +30,84 @@
     "chalk": "4.1.0",
     "copy-template-dir": "1.4.0",
     "cross-spawn": "7.0.3",
-    "debug": "4.1.1",
+    "debug": "4.3.1",
     "detect-port": "1.3.0",
     "figures": "3.2.0",
     "filesize": "6.1.0",
-    "fs-extra": "9.0.1",
-    "gzip-size": "5.1.1",
-    "inquirer": "7.2.0",
+    "fs-extra": "9.1.0",
+    "gzip-size": "6.0.0",
+    "inquirer": "8.0.0",
     "minimist": "1.2.5",
-    "ora": "4.0.4",
-    "resolve": "1.17.0",
-    "run-series": "1.1.8",
-    "semver": "7.3.2",
+    "ora": "5.4.0",
+    "resolve": "1.20.0",
+    "run-series": "1.1.9",
+    "semver": "7.3.5",
     "webpack-merge": "4.2.2",
 
-    "@babel/cli": "7.10.3",
-    "@babel/core": "7.10.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.10.1",
-    "@babel/plugin-proposal-optional-chaining": "7.10.3",
+    "@babel/cli": "7.13.14",
+    "@babel/core": "7.13.14",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-syntax-jsx": "7.10.1",
-    "@babel/plugin-transform-react-constant-elements": "7.10.1",
-    "@babel/plugin-transform-react-jsx": "7.10.3",
-    "@babel/plugin-transform-runtime": "7.10.3",
-    "@babel/polyfill": "7.10.1",
-    "@babel/preset-env": "7.10.3",
-    "@babel/preset-react": "7.10.1",
-    "@babel/runtime": "7.10.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.3.3",
-    "babel-plugin-add-module-exports": "1.0.2",
+    "@babel/plugin-syntax-jsx": "7.12.13",
+    "@babel/plugin-transform-react-constant-elements": "7.13.13",
+    "@babel/plugin-transform-react-jsx": "7.13.12",
+    "@babel/plugin-transform-runtime": "7.13.10",
+    "@babel/preset-env": "7.13.12",
+    "@babel/preset-react": "7.13.13",
+    "@babel/runtime": "7.13.10",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
+    "babel-plugin-add-module-exports": "1.0.4",
     "babel-plugin-inferno": "6.1.1",
     "babel-plugin-istanbul": "6.0.0",
     "babel-plugin-lodash": "3.3.4",
-    "babel-plugin-transform-decorators-legacy": "1.3.5",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "babel-preset-proposals": "0.3.0",
-    "react-refresh": "0.8.3",
+    "babel-preset-proposals": "0.4.0",
+    "react-refresh": "0.10.0",
 
-    "karma": "5.1.0",
+    "karma": "6.3.2",
     "karma-chrome-launcher": "3.1.0",
-    "karma-coverage": "2.0.2",
+    "karma-coverage": "2.0.3",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
-    "karma-phantomjs-launcher": "1.0.4",
-    "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "4.0.2",
-    "phantomjs-prebuilt": "2.1.16",
+    "karma-sourcemap-loader": "0.3.8",
+    "karma-webpack": "5.0.0",
 
-    "mocha": "7.1.2",
+    "mocha": "8.3.2",
     "expect": "1.20.2",
+    "process" : "0.11.10",
 
-    "webpack": "4.43.0",
-    "autoprefixer": "9.8.4",
-    "babel-loader": "8.1.0",
-    "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "6.0.2",
-    "css-loader": "3.6.0",
+    "webpack": "5.30.0",
+    "autoprefixer": "10.2.5",
+    "babel-loader": "8.2.2",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "copy-webpack-plugin": "8.1.0",
+    "css-loader": "5.2.0",
+    "css-minimizer-webpack-plugin": "1.3.0",
     "eventsource-polyfill": "0.9.6",
-    "file-loader": "6.0.0",
-    "html-webpack-plugin": "4.3.0",
-    "mini-css-extract-plugin": "0.9.0",
+    "file-loader": "6.2.0",
+    "html-webpack-plugin": "5.3.1",
+    "mini-css-extract-plugin": "1.4.0",
     "@insin/npm-install-webpack-plugin": "5.0.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "open": "7.0.4",
-    "postcss-loader": "3.0.0",
-    "style-loader": "1.2.1",
-    "terser-webpack-plugin": "3.0.6",
-    "url-loader": "4.1.0",
-    "webpack-dev-middleware": "3.7.2",
-    "webpack-dev-server": "3.11.0",
+    "open": "8.0.5",
+    "postcss": "8.2.9",
+    "postcss-loader": "5.2.0",
+    "style-loader": "2.0.0",
+    "terser-webpack-plugin": "5.1.1",
+    "url-loader": "4.1.1",
+    "webpack-dev-middleware": "4.1.0",
+    "webpack-dev-server": "3.11.2",
     "webpack-hot-middleware": "2.25.0"
   },
   "devDependencies": {
-    "@babel/preset-flow": "7.10.1",
-    "@babel/register": "7.10.3",
-    "cross-env": "7.0.2",
+    "@babel/preset-flow": "7.13.13",
+    "@babel/register": "7.13.14",
+    "cross-env": "7.0.3",
     "eslint-config-jonnybuchanan": "6.0.0",
-    "eventsource": "1.0.7",
-    "flow-bin": "0.128.0",
+    "eventsource": "1.1.0",
+    "flow-bin": "0.130.0",
     "glob": "7.1.6",
     "nyc": "15.1.0",
     "rimraf": "3.0.2",
-    "temp": "0.9.1",
+    "temp": "0.9.4",
     "tree-kill": "1.2.2"
   },
   "repository": {
@@ -126,13 +122,12 @@
     "tooling"
   ],
   "babel": {
+    "targets": {
+      "node": "10.13.0"
+    },
     "presets": [
       "@babel/flow",
-      ["@babel/env", {
-        "targets": {
-          "node": "8.9.0"
-        }
-      }],
+      "@babel/env",
       ["babel-preset-proposals", {
         "classProperties": {
           "loose": true
diff --git a/src/appCommands.js b/src/appCommands.js
index 30d7c67d..ad09c22c 100644
--- a/src/appCommands.js
+++ b/src/appCommands.js
@@ -61,11 +61,11 @@ export function createBuildConfig(args: Object, extra: Object = {}) {
   let config: Object = {
     babel: {
       env: {
-        targets: DEFAULT_BROWSERS_PROD,
         useBuiltIns: 'entry',
         corejs: 3,
         exclude: ['transform-typeof-symbol'],
       },
+      targets: DEFAULT_BROWSERS_PROD,
     },
     devtool: 'source-map',
     entry: {
@@ -105,16 +105,16 @@ export function createServeConfig(args: Object, ...extra: Object[]) {
   let config: Object = {
     babel: {
       env: {
-        targets: DEFAULT_BROWSERS_DEV,
         useBuiltIns: 'entry',
         corejs: 3,
         exclude: ['transform-typeof-symbol'],
       },
+      targets: DEFAULT_BROWSERS_DEV,
     },
     entry: [entry],
     output: {
       path: dist,
-      filename: 'app.js',
+      filename: '[name].js',
       publicPath: '/',
     },
     plugins: {
diff --git a/src/commands/build-demo.js b/src/commands/build-demo.js
index de82ee14..d5476813 100644
--- a/src/commands/build-demo.js
+++ b/src/commands/build-demo.js
@@ -17,12 +17,12 @@ function getCommandConfig(args) {
   let config = {
     babel: {
       env: {
-        targets: DEFAULT_BROWSERS_PROD,
         useBuiltIns: 'entry',
         corejs: 3,
         exclude: ['transform-typeof-symbol'],
       },
       presets: ['react'],
+      targets: DEFAULT_BROWSERS_PROD,
     },
     devtool: 'source-map',
     entry: {
diff --git a/src/commands/serve-react-demo.js b/src/commands/serve-react-demo.js
index 1634162d..840597a0 100644
--- a/src/commands/serve-react-demo.js
+++ b/src/commands/serve-react-demo.js
@@ -15,12 +15,12 @@ export default function serveReactDemo(args, cb) {
   let config = {
     babel: {
       env: {
-        targets: DEFAULT_BROWSERS_DEV,
         useBuiltIns: 'entry',
         corejs: 3,
         exclude: ['transform-typeof-symbol'],
       },
       presets: ['react'],
+      targets: DEFAULT_BROWSERS_DEV,
     },
     entry: [path.resolve('demo/src/index.js')],
     output: {
diff --git a/src/createBabelConfig.js b/src/createBabelConfig.js
index 8de2df54..3b312ff2 100644
--- a/src/createBabelConfig.js
+++ b/src/createBabelConfig.js
@@ -6,6 +6,7 @@ import {UserError} from './errors'
 type BabelPluginConfig = string | [string, Object];
 
 type BabelConfig = {
+  targets?: string | string[],
   presets: BabelPluginConfig[],
   plugins?: BabelPluginConfig[],
 };
@@ -20,6 +21,7 @@ type BuildOptions = {
   proposals?: Object,
   removePropTypes?: true | Object,
   runtime?: Object,
+  targets?: string | string[],
   webpack?: boolean,
 };
 
@@ -58,6 +60,7 @@ export default function createBabelConfig(
     proposals: buildProposals = {},
     removePropTypes: buildRemovePropTypes = false,
     runtime: buildRuntime,
+    targets: buildTargets,
     webpack = true,
   } = buildConfig
 
@@ -76,12 +79,7 @@ export default function createBabelConfig(
   } = userConfig
 
   let presets: BabelPluginConfig[] = []
-  let plugins: BabelPluginConfig[] = [
-    // XXX Webpack can't currently handle untranspiled ?. and ?? syntax
-    // See https://github.com/webpack/webpack/issues/10227#issuecomment-588409413
-    require.resolve('@babel/plugin-proposal-optional-chaining'),
-    require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-  ]
+  let plugins: BabelPluginConfig[] = []
 
   // Default to loose mode unless explicitly configured
   if (typeof loose === 'undefined') {
@@ -89,25 +87,25 @@ export default function createBabelConfig(
   }
 
   // Build config controls whether or not we set browser targets. Users can
-  // override this using `browsers` or `babel.env.targets` config.
-  let userTargets = {}
-  if (buildEnv.targets) {
-    let targets = userConfigBrowsers && (
+  // override this using `browsers` or `babel.targets` config.
+  let targetsConfig = {}
+  if (buildTargets) {
+    targetsConfig.targets = buildTargets
+    let userTargets = userConfigBrowsers && (
       process.env.NODE_ENV === 'production'
         ? userConfigBrowsers.production
         : userConfigBrowsers.development
     )
-    if (targets) {
-      userTargets.targets = targets
+    if (userTargets) {
+      targetsConfig.targets = userTargets
     }
   }
+
   presets.push(
     [require.resolve('@babel/preset-env'), {
       loose,
       ...buildEnv,
       modules,
-      // Targets config from top-level browsers config if present
-      ...userTargets,
       // The user gets a last go at all the env options
       ...userEnv
     }]
@@ -165,7 +163,7 @@ export default function createBabelConfig(
     presets = presets.concat(userPresets)
   }
 
-  let config: BabelConfig = {presets}
+  let config: BabelConfig = {...targetsConfig, presets}
 
   plugins = plugins.concat(buildPlugins, userPlugins)
 
@@ -188,7 +186,6 @@ export default function createBabelConfig(
   if (userRuntime !== false) {
     plugins.push([require.resolve('@babel/plugin-transform-runtime'), {
       absoluteRuntime: absoluteRuntime !== false ? path.resolve(__dirname, '..') : false,
-      useESModules: modules === false,
       ...typeof buildRuntime === 'object' ? buildRuntime : {},
       ...typeof userRuntime === 'object' ? userRuntime : {}
     }])
diff --git a/src/createKarmaConfig.js b/src/createKarmaConfig.js
index a42ae601..b9e6167a 100644
--- a/src/createKarmaConfig.js
+++ b/src/createKarmaConfig.js
@@ -1,5 +1,6 @@
 import path from 'path'
 
+import webpack from 'webpack'
 import merge from 'webpack-merge'
 
 import createWebpackConfig from './createWebpackConfig'
@@ -58,13 +59,13 @@ export function findPlugin(plugins, findId) {
  * Handles creation of Karma config based on Karma plugins.
  */
 export function getKarmaPluginConfig({codeCoverage = false, userConfig = {}} = {}) {
-  let browsers = ['PhantomJS']
+  let browsers = ['ChromeHeadless']
   let frameworks = ['mocha']
   let plugins = [
     require('karma-sourcemap-loader'),
     require('karma-webpack'),
   ]
-  // Default reporter if the user configure their own frameworks
+  // Default reporter if the user configures their own frameworks
   let reporters = ['dots']
 
   // Browsers, frameworks and reporters can be configured as a list containing
@@ -104,9 +105,6 @@ export function getKarmaPluginConfig({codeCoverage = false, userConfig = {}} = {
   if (reporters.indexOf('mocha') !== -1 && !findPlugin(plugins, 'reporter:mocha')) {
     plugins.push(require('karma-mocha-reporter'))
   }
-  if (browsers.indexOf('PhantomJS') !== -1 && !findPlugin(plugins, 'launcher:PhantomJS')) {
-    plugins.push(require('karma-phantomjs-launcher'))
-  }
   if (browsers.some(function matchChrom(b) { return /Chrom/.test(b) }) &&
       !findPlugin(plugins, 'launcher:Chrome')) {
     plugins.push(require('karma-chrome-launcher'))
@@ -117,6 +115,8 @@ export function getKarmaPluginConfig({codeCoverage = false, userConfig = {}} = {
     reporters.push('coverage')
   }
 
+  frameworks.push('webpack')
+
   return {browsers, frameworks, plugins, reporters}
 }
 
@@ -134,8 +134,7 @@ export default function createKarmaConfig(args, buildConfig, pluginConfig, userC
   let {excludeFromCoverage = DEFAULT_EXCLUDE_FROM_COVERAGE} = userKarma
   let testFiles = userKarma.testFiles || DEFAULT_TEST_FILES
 
-  // Polyfill by default for browsers which lack features (hello PhantomJS)
-  let files = [require.resolve('@babel/polyfill/dist/polyfill.js')]
+  let files = []
   let preprocessors = {}
 
   if (userKarma.testContext) {
@@ -184,28 +183,31 @@ export default function createKarmaConfig(args, buildConfig, pluginConfig, userC
     reporters,
     singleRun: isCi || !args.server,
     webpack: createWebpackConfig(merge(buildConfig, {
-      devtool: 'cheap-module-inline-source-map',
-      node: {
-        fs: 'empty',
-      },
+      devtool: 'inline-cheap-module-source-map',
       plugins: {
         status: {
           quiet: true,
-        }
+        },
+        extra: [
+          new webpack.ProvidePlugin({
+            process: require.resolve('process/browser'),
+          }),
+        ]
       },
       resolve: {
         alias: {
           expect: path.dirname(require.resolve('expect/package')),
           src: path.resolve('src'),
         },
+        fallback: {
+          fs: false,
+        },
       },
       server: {
         hot: false,
       },
+      stats: 'none'
     }), pluginConfig, userConfig),
-    webpackMiddleware: {
-      logLevel: 'silent'
-    },
   }
 
   // Any extra user Karma config is merged into the generated config to give
diff --git a/src/createProject.js b/src/createProject.js
index 68e8e396..7940f22d 100644
--- a/src/createProject.js
+++ b/src/createProject.js
@@ -160,7 +160,7 @@ function createAppProject(args, projectType, name, targetDir, cb) {
       copyTemplate(templateDir, targetDir, templateVars, cb)
     },
     (cb) => {
-      // Allow specification of the exact version, e.g. --react=16.2
+      // Allow specification of the exact version, e.g. --react=17.0.2
       if (dependencies.length !== 0 && args[appType]) {
         dependencies = dependencies.map(pkg => `${pkg}@${args[appType]}`)
       }
@@ -227,7 +227,7 @@ function createModuleProject(args, projectType, name, targetDir, cb) {
       }
       else {
         // TODO Get from npm so we don't have to manually update on major releases
-        templateVars.reactPeerVersion = '16.x'
+        templateVars.reactPeerVersion = '17.x'
       }
     }
 
diff --git a/src/createWebpackConfig.js b/src/createWebpackConfig.js
index c5f894d2..81b21d5c 100644
--- a/src/createWebpackConfig.js
+++ b/src/createWebpackConfig.js
@@ -210,9 +210,10 @@ export function createStyleLoaders(
     createLoader(name('postcss'), {
       loader: require.resolve('postcss-loader'),
       options: {
-        ident: name('postcss'),
-        plugins: createDefaultPostCSSPlugins(userWebpackConfig),
-      }
+        postcssOptions: {
+          plugins: createDefaultPostCSSPlugins(userWebpackConfig),
+        },
+      },
     })
   ]
 
@@ -417,11 +418,13 @@ function inlineRuntimePlugin() {
     HtmlPlugin.getHooks(compilation).alterAssetTags.tapAsync('inlineRuntimePlugin', (data, cb) => {
       Object.keys(compilation.assets).forEach(assetName => {
         if (!/^runtime\.[a-z\d]+\.js$/.test(assetName)) return
-        let {children} = compilation.assets[assetName]
-        if (children && children[0]) {
+        let asset = compilation.assets[assetName]
+        let source = asset.source()
+        if (source) {
           let tag = data.assetTags.scripts.find(tag => tag.attributes.src.endsWith(assetName))
+          delete tag.attributes.defer
           delete tag.attributes.src
-          tag.innerHTML = children[0]._value
+          tag.innerHTML = source
         }
       })
       cb(null, data)
@@ -460,7 +463,11 @@ export function createPlugins(
 ): {optimization: Object, plugins: Object[]} {
   let production = process.env.NODE_ENV === 'production'
 
-  let optimization = {}
+  let optimization: Object = {
+    // Tell webpack not to use DefinePlugin to define 'process.env.NODE_ENV' itself
+    nodeEnv: false
+  }
+
   let plugins = [
     // Enforce case-sensitive import paths
     new CaseSensitivePathsPlugin(),
@@ -482,7 +489,6 @@ export function createPlugins(
     // HMR is enabled by default but can be explicitly disabled
     if (server.hot !== false) {
       plugins.push(new webpack.HotModuleReplacementPlugin())
-      optimization.noEmitOnErrors = true
     }
     if (buildConfig.reactRefresh) {
       plugins.push(new ReactRefreshPlugin())
@@ -509,7 +515,7 @@ export function createPlugins(
         // A 'vendors' cacheGroup will get defaulted if it doesn't exist, so
         // we override it to explicitly set the chunk name.
         cacheGroups: {
-          vendors: {
+          defaultVendors: {
             name: 'vendor',
             priority: -10,
             test: /[\\/]node_modules[\\/]/,
@@ -529,16 +535,9 @@ export function createPlugins(
       optimization.minimizer = [
         (compiler: any) => {
           let TerserPlugin = require('terser-webpack-plugin')
-          let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+          let CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
           new TerserPlugin(createTerserConfig(userConfig)).apply(compiler)
-          new OptimizeCSSAssetsPlugin({
-            cssProcessorOptions: {
-              map: {
-                inline: false,
-                annotation: true,
-              }
-            }
-          }).apply(compiler)
+          new CssMinimizerPlugin().apply(compiler)
         }
       ]
     }
diff --git a/src/devServer.js b/src/devServer.js
index 187cd7b5..a64f0ecd 100644
--- a/src/devServer.js
+++ b/src/devServer.js
@@ -26,9 +26,6 @@ export default function devServer(webpackConfig, serverConfig, url, cb) {
     overlay: true,
     publicPath: webpackConfig.output.publicPath,
     quiet: true,
-    watchOptions: {
-      ignored: /node_modules/,
-    },
   }, otherServerConfig)
 
   debug('webpack dev server options: %s', deepToString(webpackDevServerOptions))
diff --git a/src/expressMiddleware.js b/src/expressMiddleware.js
index 6b628423..5c9fbc95 100644
--- a/src/expressMiddleware.js
+++ b/src/expressMiddleware.js
@@ -52,6 +52,7 @@ export default function nwbMiddleware(express: Object, options: Object = {}) {
   let webpackConfig = createServerWebpackConfig(
     args,
     createServeConfig(args, appTypeConfig.getServeConfig(), {
+      stats: 'none',
       plugins: {
         status: {
           disableClearConsole: true,
@@ -68,11 +69,7 @@ export default function nwbMiddleware(express: Object, options: Object = {}) {
   let router = express.Router()
 
   router.use(require('webpack-dev-middleware')(compiler, {
-    logLevel: 'silent',
     publicPath: webpackConfig.output.publicPath,
-    watchOptions: {
-      ignored: /node_modules/
-    }
   }))
 
   router.use(require('webpack-hot-middleware')(compiler, {
diff --git a/src/karmaServer.js b/src/karmaServer.js
index ba651fe8..2bcd412c 100644
--- a/src/karmaServer.js
+++ b/src/karmaServer.js
@@ -1,4 +1,4 @@
-import {Server} from 'karma'
+import {Server, config} from 'karma'
 
 import {getPluginConfig, getUserConfig} from './config'
 import createKarmaConfig from './createKarmaConfig'
@@ -12,7 +12,7 @@ export default function karmaServer(args, buildConfig, cb) {
   let userConfig = getUserConfig(args, {pluginConfig})
   let karmaConfig = createKarmaConfig(args, buildConfig, pluginConfig, userConfig)
 
-  new Server(karmaConfig, (exitCode) => {
+  new Server(config.parseConfig(null, karmaConfig), (exitCode) => {
     if (exitCode !== 0) return cb(new KarmaExitCodeError(exitCode))
     cb()
   }).start()
diff --git a/src/quickCommands.js b/src/quickCommands.js
index 1a36091c..144f63f6 100644
--- a/src/quickCommands.js
+++ b/src/quickCommands.js
@@ -82,14 +82,14 @@ export function createBuildConfig(args: Object, options: QuickConfigOptions) {
   let config: Object = {
     babel: {
       env: {
-        targets: DEFAULT_BROWSERS_PROD,
         useBuiltIns: 'entry',
         corejs: 3,
         exclude: ['transform-typeof-symbol'],
       },
       proposals: {
         all: true
-      }
+      },
+      targets: DEFAULT_BROWSERS_PROD,
     },
     devtool: 'source-map',
     output: {
@@ -148,14 +148,14 @@ export function createServeConfig(args: Object, options: QuickConfigOptions) {
   let config: Object = {
     babel: {
       env: {
-        targets: DEFAULT_BROWSERS_DEV,
         useBuiltIns: 'entry',
         corejs: 3,
         exclude: ['transform-typeof-symbol'],
       },
       proposals: {
         all: true
-      }
+      },
+      targets: DEFAULT_BROWSERS_DEV,
     },
     output: {
       filename: 'app.js',
diff --git a/src/webpackUtils.js b/src/webpackUtils.js
index 6fe730c3..fba53d96 100644
--- a/src/webpackUtils.js
+++ b/src/webpackUtils.js
@@ -1,3 +1,4 @@
+import fs from 'fs'
 import path from 'path'
 
 import chalk from 'chalk'
@@ -39,30 +40,13 @@ export function createExternals(externals = {}) {
   }, {})
 }
 
-function formatMessage(message) {
-  return message
-    // Make some common errors shorter:
-    .replace(
-      // Babel syntax error
-      'Module build failed: SyntaxError:',
-      FRIENDLY_SYNTAX_ERROR_LABEL
-    )
-    .replace(
-      // Webpack file not found error
-      /Module not found: Error: Cannot resolve 'file' or 'directory'/,
-      'Module not found:'
-    )
-    // Webpack loader names obscure CSS filenames
-    .replace(/^.*css-loader.*!/gm, '')
-}
-
 function isLikelyASyntaxError(message) {
   return message.includes(FRIENDLY_SYNTAX_ERROR_LABEL)
 }
 
 function formatMessages(messages, type) {
   return messages.map(
-    message => `${type} in ${formatMessage(message)}`
+    message => `${type} ${message.message}${message.details ? `\n\n${message.details}` : ''}`
   )
 }
 
@@ -71,7 +55,8 @@ function getFileDetails(stats) {
   return Object.keys(stats.compilation.assets)
     .filter(assetName => /\.(css|js)$/.test(assetName))
     .map(assetName => {
-      let size = gzipSize(stats.compilation.assets[assetName].source())
+      let contents = fs.readFileSync(path.join(outputPath, assetName))
+      let size = gzipSize(contents)
       return {
         dir: path.dirname(path.join(path.relative(process.cwd(), outputPath), assetName)),
         name: path.basename(assetName),
diff --git a/tests/commands/build-test.js b/tests/commands/build-test.js
index 6b53a889..22f5c738 100644
--- a/tests/commands/build-test.js
+++ b/tests/commands/build-test.js
@@ -64,7 +64,7 @@ describe('command: build', function() {
       ])
     })
     it('injects the Webpack runtime into generated HTML', () => {
-      expect(builtHTML).toInclude('window.webpackJsonp')
+      expect(builtHTML).toInclude('self.webpackChunk')
     })
     it('does not generate a <script src> for the runtime', () => {
       expect(builtHTML).toNotInclude('src="/runtime"')
diff --git a/tests/commands/new-init-test.js b/tests/commands/new-init-test.js
index 376eba16..08280a79 100644
--- a/tests/commands/new-init-test.js
+++ b/tests/commands/new-init-test.js
@@ -78,7 +78,7 @@ function reactComponentAssertions(dir, name, err, done) {
   expect(pkg.name).toBe(name)
   expect(pkg['module']).toBe('es/index.js')
   expect(pkg.devDependencies.nwb).toMatch(DEP_VERSION_RE)
-  expect(pkg.peerDependencies.react).toBe('16.x')
+  expect(pkg.peerDependencies.react).toBe('17.x')
   let config = require(path.resolve(dir, 'nwb.config.js'))
   expect(config).toEqual({
     type: 'react-component',
diff --git a/tests/commands/projects-test.js b/tests/commands/projects-test.js
index 2558c65f..08273a9b 100644
--- a/tests/commands/projects-test.js
+++ b/tests/commands/projects-test.js
@@ -272,16 +272,16 @@ describe('sample projects', function() {
     it('creates split bundles, vendor bundles, copies public subdirs and includes font resources', () => {
       let files = stripHashes((glob.sync('**/*', {cwd: path.resolve('dist')}))).sort()
       expect(files).toEqual([
-        '3.css',
-        '3.css.map',
-        '3.js',
-        '3.js.map',
-        '4.js',
-        '4.js.map',
         'app.css',
         'app.css.map',
         'app.js',
         'app.js.map',
+        'child1.js',
+        'child1.js.map',
+        'child2.css',
+        'child2.css.map',
+        'child2.js',
+        'child2.js.map',
         'favicon.ico',
         'glyphicons-halflings-regular.eot',
         'glyphicons-halflings-regular.svg',
diff --git a/tests/createBabelConfig-test.js b/tests/createBabelConfig-test.js
index 458056df..daf4a6f6 100644
--- a/tests/createBabelConfig-test.js
+++ b/tests/createBabelConfig-test.js
@@ -10,7 +10,6 @@ let ABSOLUTE_RUNTIME_PATH = path.resolve(__dirname, '..')
 let DEFAULT_RUNTIME_CONFIG =
   [require.resolve('@babel/plugin-transform-runtime'), {
     absoluteRuntime: ABSOLUTE_RUNTIME_PATH,
-    useESModules: true,
   }]
 
 let DEFAULT_PROPOSALS_CONFIG =
@@ -23,11 +22,6 @@ let DEFAULT_PROPOSALS_CONFIG =
     loose: true,
   }]
 
-let DEFAULT_PLUGINS_CONFIG = [
-  require.resolve('@babel/plugin-proposal-optional-chaining'),
-  require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-]
-
 describe('createBabelConfig()', () => {
   context('without any build or user config', () => {
     it('generates default Babel config', () => {
@@ -37,7 +31,6 @@ describe('createBabelConfig()', () => {
           DEFAULT_PROPOSALS_CONFIG,
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           DEFAULT_RUNTIME_CONFIG,
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ]
@@ -55,10 +48,8 @@ describe('createBabelConfig()', () => {
           DEFAULT_PROPOSALS_CONFIG,
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           [require.resolve('@babel/plugin-transform-runtime'), {
             absoluteRuntime: ABSOLUTE_RUNTIME_PATH,
-            useESModules: false,
           }],
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ],
@@ -67,17 +58,16 @@ describe('createBabelConfig()', () => {
     it('merges env config', () => {
       expect(createBabelConfig({
         env: {
-          targets: 'build browsers',
           useBuiltIns: 'entry',
           corejs: 3,
           exclude: ['transform-typeof-symbol'],
-        }
+        },
+        targets: 'build browsers',
       })).toEqual({
         presets: [
           [require.resolve('@babel/preset-env'), {
             loose: true,
             modules: false,
-            targets: 'build browsers',
             useBuiltIns: 'entry',
             corejs: 3,
             exclude: ['transform-typeof-symbol'],
@@ -85,13 +75,12 @@ describe('createBabelConfig()', () => {
           DEFAULT_PROPOSALS_CONFIG,
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           [require.resolve('@babel/plugin-transform-runtime'), {
             absoluteRuntime: ABSOLUTE_RUNTIME_PATH,
-            useESModules: true,
           }],
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ],
+        targets: 'build browsers',
       })
     })
     it('adds the @babel/preset-react preset given a "react" preset', () => {
@@ -105,7 +94,6 @@ describe('createBabelConfig()', () => {
           [require.resolve('@babel/preset-react'), {development: true}],
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           DEFAULT_RUNTIME_CONFIG,
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ],
@@ -121,7 +109,6 @@ describe('createBabelConfig()', () => {
           [require.resolve('@babel/preset-env'), {loose: true, modules: false}],
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           require.resolve('@babel/plugin-transform-react-constant-elements'),
           [require.resolve('babel-plugin-transform-react-remove-prop-types'), {}],
           DEFAULT_RUNTIME_CONFIG,
@@ -139,7 +126,6 @@ describe('createBabelConfig()', () => {
           [require.resolve('@babel/preset-env'), {loose: true, modules: false}],
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           [require.resolve('babel-plugin-transform-react-remove-prop-types'), {}],
           DEFAULT_RUNTIME_CONFIG,
           require.resolve('@babel/plugin-syntax-dynamic-import'),
@@ -155,10 +141,8 @@ describe('createBabelConfig()', () => {
           DEFAULT_PROPOSALS_CONFIG,
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           [require.resolve('@babel/plugin-transform-runtime'), {
             absoluteRuntime: false,
-            useESModules: true,
           }],
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ]
@@ -190,7 +174,6 @@ describe('createBabelConfig()', () => {
           'test-preset',
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           'test-plugin',
           DEFAULT_RUNTIME_CONFIG,
           require.resolve('@babel/plugin-syntax-dynamic-import'),
@@ -206,35 +189,32 @@ describe('createBabelConfig()', () => {
           DEFAULT_PROPOSALS_CONFIG,
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           [require.resolve('@babel/plugin-transform-runtime'), {
             absoluteRuntime: ABSOLUTE_RUNTIME_PATH,
-            useESModules: true,
             helpers: false,
           }],
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ]
       })
     })
-    it('uses user browser config when the build has env.targets', () => {
+    it('uses user browser config when the build has targets', () => {
       expect(createBabelConfig(
-        {env: {targets: 'build'}},
+        {targets: 'build'},
         {},
         '',
         {development: 'user'}
       )).toEqual({
         presets: [
-          [require.resolve('@babel/preset-env'), {loose: true, modules: false, targets: 'user'}],
+          [require.resolve('@babel/preset-env'), {loose: true, modules: false}],
           DEFAULT_PROPOSALS_CONFIG,
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           [require.resolve('@babel/plugin-transform-runtime'), {
             absoluteRuntime: ABSOLUTE_RUNTIME_PATH,
-            useESModules: true,
           }],
           require.resolve('@babel/plugin-syntax-dynamic-import'),
-        ]
+        ],
+        targets: 'user',
       })
     })
   })
@@ -255,7 +235,6 @@ describe('createBabelConfig()', () => {
           }]
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           DEFAULT_RUNTIME_CONFIG,
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ]
@@ -275,7 +254,6 @@ describe('createBabelConfig()', () => {
           }]
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           DEFAULT_RUNTIME_CONFIG,
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ]
@@ -287,7 +265,6 @@ describe('createBabelConfig()', () => {
           [require.resolve('@babel/preset-env'), {loose: true, modules: false}],
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           DEFAULT_RUNTIME_CONFIG,
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ]
@@ -300,7 +277,6 @@ describe('createBabelConfig()', () => {
           DEFAULT_PROPOSALS_CONFIG,
         ],
         plugins: [
-          ...DEFAULT_PLUGINS_CONFIG,
           require.resolve('@babel/plugin-syntax-dynamic-import'),
         ]
       })
diff --git a/tests/createKarmaConfig-test.js b/tests/createKarmaConfig-test.js
index 6a4cc8a2..ce7a95f7 100644
--- a/tests/createKarmaConfig-test.js
+++ b/tests/createKarmaConfig-test.js
@@ -32,16 +32,16 @@ describe('getKarmaPluginConfig()', function() {
   this.timeout(10000)
   describe('without user config', () => {
     let expectedDefaultPlugins = [
-      'launcher:PhantomJS',
+      'launcher:Chrome',
       'preprocessor:sourcemap',
-      'webpackPlugin',
+      'preprocessor:webpack',
       'framework:mocha',
       'reporter:mocha',
     ]
-    it('defaults to Mocha and PhantomJS', () => {
+    it('defaults to Mocha and ChromeHeadless', () => {
       let {browsers, frameworks, reporters, plugins} = getKarmaPluginConfig()
-      expect(browsers).toEqual(['PhantomJS'])
-      expect(frameworks).toEqual(['mocha'])
+      expect(browsers).toEqual(['ChromeHeadless'])
+      expect(frameworks).toEqual(['mocha', 'webpack'])
       expect(reporters).toEqual(['mocha'])
       expectedDefaultPlugins.forEach(plugin =>
         expect(findPlugin(plugins, plugin)).toExist()
@@ -49,8 +49,8 @@ describe('getKarmaPluginConfig()', function() {
     })
     it('adds coverage config when asked to', () => {
       let {browsers, frameworks, reporters, plugins} = getKarmaPluginConfig({codeCoverage: true})
-      expect(browsers).toEqual(['PhantomJS'])
-      expect(frameworks).toEqual(['mocha'])
+      expect(browsers).toEqual(['ChromeHeadless'])
+      expect(frameworks).toEqual(['mocha', 'webpack'])
       expect(reporters).toEqual(['mocha', 'coverage'])
       expectedDefaultPlugins.concat(['preprocessor:coverage']).forEach(plugin => {
         expect(findPlugin(plugins, plugin)).toExist()
@@ -68,7 +68,7 @@ describe('getKarmaPluginConfig()', function() {
           frameworks: [tapeFramework],
         },
       })
-      expect(frameworks).toEqual(['tape'])
+      expect(frameworks).toEqual(['tape', 'webpack'])
       expect(reporters).toEqual(['dots'])
       expect(findPlugin(plugins, 'framework:tape')).toExist()
     })
@@ -79,7 +79,7 @@ describe('getKarmaPluginConfig()', function() {
           plugins: [tapeFramework],
         },
       })
-      expect(frameworks).toEqual(['tape'])
+      expect(frameworks).toEqual(['tape', 'webpack'])
       expect(reporters).toEqual(['dots'])
       expect(findPlugin(plugins, 'framework:tape')).toExist()
     })
@@ -90,7 +90,7 @@ describe('getKarmaPluginConfig()', function() {
           reporters: [tapReporter],
         },
       })
-      expect(frameworks).toEqual(['tape'])
+      expect(frameworks).toEqual(['tape', 'webpack'])
       expect(reporters).toEqual(['tap'])
       expect(findPlugin(plugins, 'framework:tape')).toExist()
       expect(findPlugin(plugins, 'reporter:tap')).toExist()
@@ -103,7 +103,7 @@ describe('getKarmaPluginConfig()', function() {
           plugins: [tapeFramework, tapReporter],
         },
       })
-      expect(frameworks).toEqual(['tape'])
+      expect(frameworks).toEqual(['tape', 'webpack'])
       expect(reporters).toEqual(['tap'])
       expect(findPlugin(plugins, 'framework:tape')).toExist()
       expect(findPlugin(plugins, 'reporter:tap')).toExist()
@@ -116,7 +116,7 @@ describe('getKarmaPluginConfig()', function() {
           plugins: [{'framework: chai': []}],
         },
       })
-      expect(frameworks).toEqual(['mocha', 'chai', 'chai-as-promised'])
+      expect(frameworks).toEqual(['mocha', 'chai', 'chai-as-promised', 'webpack'])
       expect(reporters).toEqual(['mocha'])
       expect(findPlugin(plugins, 'framework:mocha')).toExist()
       expect(findPlugin(plugins, 'reporter:mocha')).toExist()
@@ -135,10 +135,9 @@ describe('getKarmaPluginConfig()', function() {
 })
 
 describe('createKarmaConfig()', () => {
-  it('includes polyfill and default test files pattern', () => {
+  it('includes default test files pattern', () => {
     let config = createKarmaConfig({}, {}, {}, {})
     expect(config.files).toEqual([
-      require.resolve('@babel/polyfill/dist/polyfill.js'),
       '+(src|test?(s))/**/*+(.spec|.test).js',
     ])
   })
@@ -157,7 +156,7 @@ describe('createKarmaConfig()', () => {
         }
       }
     })
-    expect(config.browsers).toEqual(['PhantomJS', 'Chrome'])
+    expect(config.browsers).toEqual(['ChromeHeadless', 'Chrome'])
     expect(config.mochaReporter).toEqual({output: 'autowatch', showDiff: true})
   })
   it('supports a karma.config() function to manually edit generated config', () => {
@@ -169,6 +168,6 @@ describe('createKarmaConfig()', () => {
         }
       }
     })
-    expect(config.browsers).toEqual(['PhantomJS', 'Chrome'])
+    expect(config.browsers).toEqual(['ChromeHeadless', 'Chrome'])
   })
 })
diff --git a/tests/fixtures/projects/router-app/src/routes/root.js b/tests/fixtures/projects/router-app/src/routes/root.js
index 9ca71df4..4ac87551 100644
--- a/tests/fixtures/projects/router-app/src/routes/root.js
+++ b/tests/fixtures/projects/router-app/src/routes/root.js
@@ -8,9 +8,9 @@ let routes = <Route path="/" component={App}>
     path="child1"
     getComponent={
       (nextState, cb) => {
-        require.ensure([], (require) => {
-          cb(null, require('./child1/Child1').default)
-        })
+        import(/* webpackChunkName: "child1" */ './child1/Child1')
+          .then(component => cb(null, component))
+          .catch(error => cb(error))
       }
     }
   />
@@ -18,9 +18,9 @@ let routes = <Route path="/" component={App}>
     path="child2(/:site)"
     getComponent={
       (nextState, cb) => {
-        require.ensure([], (require) => {
-          cb(null, require('./child2/Child2').default)
-        })
+        import(/* webpackChunkName: "child2" */ './child2/Child2')
+          .then(component => cb(null, component))
+          .catch(error => cb(error))
       }
     }
   />