Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Last call for Create React App v2

See original GitHub issue

Hi everyone! We just released what we hope to be the last beta before v2 is marked stable and tagged latest on npm tomorrow.

Please try it as soon as possible and let us know if you run into any issues!

Create new application:

$ npx create-react-app@next --scripts-version=@next test-next

Upgrade existing:

$ npm install react-scripts@next --save
$ # or
$ yarn add react-scripts@next

Here’s a draft of the release notes:

Create React App v2.0.1

New Features

  1. Updated tooling: Babel 7, webpack 4, Jest 23
  2. Packages using new JavaScript features in node_modules now work
  3. Automatic vendor bundles and long term caching
  4. CSS Modules
  5. Sass Support
  6. SVGs as React Components
  7. Babel Macros
  8. Targetable CSS support, with automatic polyfills and prefixing

Migrating from 1.1.15 to 2.0.1

Inside any created project that has not been ejected, run:

$ npm install --save --save-exact react-scripts@2.0.1
$ # or
$ yarn add --exact react-scripts@2.0.1

Next, follow the migration instructions below that are relevant to you.

You may no longer code split with require.ensure()

We previously allowed code splitting with a webpack-specific directive, require.ensure(). It is now disabled in favor of import().

To switch to import(), follow the examples below:

Single Module

require.ensure(['module-a'], function() {
  var a = require('module-a');
  // ...
// Replace with:
import('module-a').then(a => {
  // ...

Multiple Module

require.ensure(['module-a', 'module-b'], function() {
  var a = require('module-a');
  var b = require('module-b');
  // ...
// Replace with:
Promise.all([import('module-a'), import('module-b')]).then(([a, b]) => {
  // ...

The default Jest environment was changed to jsdom

Look at the test entry in the scripts section of your package.json. Here’s a table how to change it from “before” and “after”, depending on what you have there:

1.x (if you have this…) 2.x (…change it to this!)
react-scripts test --env=jsdom react-scripts test
react-scripts test react-scripts test --env=node

.mjs file extension support was removed

Change the extension of any files in your project using .mjs to just .js.

It was removed because of inconsistent support from underlying tools. We will add it back after it stops being experimental, and Jest gets built-in support for it.

Move advanced proxy configuration to src/setupProxy.js

This change is only required for individuals who used the advanced proxy configuration in v1.

To check if action is required, look for the proxy key in package.json. Then, follow the table below.

  1. I couldn’t find a proxy key in package.json
    • No action is required!
  2. The value of proxy is a string (e.g. http://localhost:5000)
    • No action is required!
  3. The value of proxy is an object
    • Follow the migration instructions below.

If your proxy is an object, that means you are using the advanced proxy configuration.

Again, if your proxy field is a string, e.g. http://localhost:5000, you do not need to do anything. This feature is still supported and has the same behavior.

First, install http-proxy-middleware using npm or Yarn:

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

Next, create src/setupProxy.js and place the following contents in it:

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  // ...

Now, migrate each entry in your proxy object one by one, e.g.:

"proxy": {
  "/api": {
    "target": "http://localhost:5000/"
  "/*.svg": {
    "target": "http://localhost:5000/"

Place entries into src/setupProxy.js like so:

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }))
  app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))

You can also use completely custom logic there now! This wasn’t possible before.

Internet Explorer is no longer supported by default (but you can opt in!)

We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below.

First, install react-app-polyfill:

$ npm install react-app-polyfill --save
$ # or
$ yarn add react-app-polyfill

Next, place one of the following lines at the very top of src/index.js:

import 'react-app-polyfill/ie9'; // For IE 9-11 support
import 'react-app-polyfill/ie11'; // For IE 11 support

You can read more about these polyfills here.

The behavior of a CommonJS import() has changed

Webpack 4 changed the behavior of import() to be closer in line with the specification.

Previously, importing a CommonJS module did not require you specify the default export. In most cases, this is now required. If you see errors in your application about ... is not a function, you likely need to update your dynamic import, e.g.:

const throttle = await import("lodash/throttle");
// replace with
const throttle = await import("lodash/throttle").then(m => m.default);

Anything missing?

This was a large release, and we might have missed something.

Please file an issue and we will try to help.

Migrating from

If you used 2.x alphas, please follow these instructions.

Detailed Changelog

>> TODO <<

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:501
  • Comments:144 (69 by maintainers)

github_iconTop GitHub Comments

stramelcommented, Sep 26, 2018

Are you planning on getting the typescript PR in or will that come in a minor update post 2.0 release?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Create React App 2.0: Babel 7, Sass, and More
Create React App 2.0 has been released today, and it brings a year's worth of improvements in a single dependency update.
Read more >
Create React App 2.0: What's New? - Auth0
Learn what's new in ReactJS Create React App 2.0. Get an overview of each new feature and update recently released - Babel, Webpack, ......
Read more >
So what's New in Create-React-App v2? | by Lotanna Nwose
Introducing the new features of Create React App version 2.0 with Babel 7, Webpack 4, Jest 23, CSS and Sass updates, Yarn plug...
Read more >
Create React App
Whether you're using React or another library, Create React App lets you focus on code, not build tools. To create a project called...
Read more >
Hello, Create React App 2.0! - Telerik
json , but it turns out that's because CRA has a dependency called react-scripts that hides these and other dependencies and configurations from ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found