Last call for Create React App v2

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

Updated tooling: Babel 7, webpack 4, Jest 23
Packages using new JavaScript features in node_modules now work
Automatic vendor bundles and long term caching
CSS Modules
Sass Support
SVGs as React Components
Babel Macros
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.

I couldn't find a proxy key in package.json
- No action is required!
The value of proxy is a string (e.g. http://localhost:5000)
- No action is required!
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 2.0.0-next.xyz

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

Detailed Changelog

>> TODO <<

I'm a bit late to the party. What do you mean with "node_modules are now compiled"?

I reworded to

Packages using new JavaScript features in node_modules now work

Does this make more sense?

I'm a bit late to the party. What dou you mean with "node_modules are now compiled"?

node_modules bundled with the app?

@gaearon

Thanks @gaearon, I was about to ask the same thing ^.^

I don't think I've ever needed it, but I guess it's nice it's there. Maybe this'll help build proper "goto definition" functionality, right now it keeps jumping to compiled js, and it's a mess.

Does this make more sense?

Yes. Thanks Dan!

I don't think I've ever needed it, but I guess it's nice it's there. Maybe this'll help build proper "goto definition" functionality, right now it keeps jumping to compiled js, and it's a mess.

I think there is some kind of misunderstanding here.

Previously, if somebody published a package that used newer syntax like const, and you imported that package, your app wouldn't build. We've had dozens of issues filed about this. See all issues linked from #1125. Now it will work.

Have an issue with @next:

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.

Actually, there was pretty extensive amount of options for proxy, are they all gone? With target, pathRewrite etc.
I used them on alpha as well.

@Z-AX

@Z-AX this is not a bug -- we removed the proxy options. Please read the migration instructions above. 😄

Good job everyone working on wrapping up the 2.0 release! Thanks for your efforts!

Just tried here. It works. One question:

Why it says 1 instead of vendor? I guess that's the vendor bundle.
What if I have async routes and don't want to name them? Can I customize the vendor bundle name?

@Timer

@Timer I don't see it in docs right here and it was working with the most recent alpha.
How should we migrate now without proxy? Why even it was removed? Very helpful for dev envs.

Edit: see it in Roadmap, don't see new docs on this.

@Z-AX

@Z-AX You can now provide a custom express middleware function as a proxy: #5073. This should give you complete control over the proxy.

So what about TypeScript built-in support?

@gaearon

Thanks @gaearon and sorry... my mistake. We are replacing all our decorators (@Observers). I will be back and I will give you feedback...

@borisowsky We didn't say TypeScript would be coming in 2.0 anywhere. That said it's likely we'll add something in 2.x.

Upgrading an app created with 1.1.3, no issues when upgrading react-scripts but I'm having trouble trying to install the polyfills:

$ yarn add react-app-polyfill
yarn add v1.9.4
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > @storybook/addon-storyshots@3.4.10" has incorrect peer dependency "@storybook/addons@3.4.10".
warning "@storybook/addon-storyshots > jest-image-snapshot@2.4.3" has unmet peer dependency "jest@>=20 <=23".
warning "@storybook/addon-storyshots > jest-specific-snapshot@0.5.0" has unmet peer dependency "jest@*".

<--- Last few GCs --->

[83663:0x102804400]   183430 ms: Mark-sweep 2364.2 (2453.2) -> 2360.9 (2454.2) MB, 443.8 / 0.0 ms  allocation failure GC in old space requested
[83663:0x102804400]   183885 ms: Mark-sweep 2360.9 (2454.2) -> 2360.8 (2421.7) MB, 455.1 / 0.0 ms  last resort GC in old space requested
[83663:0x102804400]   184336 ms: Mark-sweep 2360.8 (2421.7) -> 2360.8 (2421.2) MB, 450.3 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x13c91c8a5879 <JSObject>
    1: set(this=0x13c9f54a9ac9 <Map map = 0x13c90e5048d9>,0x13c90c11f7b1 <Very long string[2763]>,0x13c90c120d61 <HoistManifest map = 0x13c99babdfb1>)
    2: taintKey [/Users/pimlottc/.nvm/versions/node/v8.11.3/lib/node_modules/yarn/lib/cli.js:~85401] [pc=0x135cab899916](this=0x13c992f49cf1 <PackageHoister map = 0x13c99baad1d9>,key=0x13c90c11f7b1 <Very long string[2763]>,info=0x13c90c120d61 <Hoi...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/Users/pimlottc/.nvm/versions/node/v8.11.3/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/Users/pimlottc/.nvm/versions/node/v8.11.3/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/Users/pimlottc/.nvm/versions/node/v8.11.3/bin/node]
 4: v8::internal::Factory::NewFixedArray(int, v8::internal::PretenureFlag) [/Users/pimlottc/.nvm/versions/node/v8.11.3/bin/node]
 5: v8::internal::OrderedHashTable<v8::internal::OrderedHashMap, 2>::Rehash(v8::internal::Handle<v8::internal::OrderedHashMap>, int) [/Users/pimlottc/.nvm/versions/node/v8.11.3/bin/node]
 6: v8::internal::Runtime_MapGrow(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/pimlottc/.nvm/versions/node/v8.11.3/bin/node]
 7: 0x135cab5842fd
Abort trap: 6

Sorry, that sounds like a Yarn failure so we can't help with it.

@gaearon

@gaearon okay, I mention it though because I didn't have this issue before I upgraded react-scripts.

Looks like there is a new release of eslint@5.6.1 that CRA is complaining about if you have eslint installed local.

I mean, in general we never supported installing eslint at top level of your project.

I mean, in general we never supported installing eslint at top level of your project.

I know this is the official stance and this discussion should take place elsewhere but I think many people who are using CRA in a production / semi-production setup use eslint to do more than in editor linting tasks.

I understand where you're coming from — I'm not saying we're opposed on principle but I'm saying that it has always caused hard-to-debug issues like this due to how ESLint doesn't allow presets to encapsulate their plugins. ESLint plans to fix this in ESLint 5 so that will solve the issue permanently. In the meantime, we want to warn our users that when they do something like this, our setup can break.

Again, you can ignore our warning, just as the warning says. Or maybe we're talking about different things. Did you notice the warning provides instructions for how to turn it off at the bottom?

https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

I've followed the instructions from the proxy migrations but they don't work for me, i've installed the
'http-proxy-middleware' package and created the 'setupProxy.js' file inside the 'src' folder in my client but
it's not working, any idea?

@R4z1ell

@R4z1ell Please file a new issue.

Navigation Menu

Repository navigation

Last call for Create React App v2 #5103

Create React App v2.0.1

New Features

Migrating from 1.1.15 to 2.0.1

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

The default Jest environment was changed to `jsdom`

`.mjs` file extension support was removed

Move advanced proxy configuration to `src/setupProxy.js`

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

The behavior of a CommonJS `import()` has changed

Anything missing?

Migrating from 2.0.0-next.xyz

Detailed Changelog

125 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Last call for Create React App v2 #5103

Description

Create React App v2.0.1

New Features

Migrating from 1.1.15 to 2.0.1

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

The default Jest environment was changed to jsdom

.mjs file extension support was removed

Move advanced proxy configuration to src/setupProxy.js

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

The behavior of a CommonJS import() has changed

Anything missing?

Migrating from 2.0.0-next.xyz

Detailed Changelog

Activity

zaguiini commented on Sep 26, 2018

gaearon commented on Sep 26, 2018

ozzie1998 commented on Sep 26, 2018

jordyvandomselaar commented on Sep 26, 2018

zaguiini commented on Sep 26, 2018

gaearon commented on Sep 26, 2018

dmythro commented on Sep 26, 2018

Timer commented on Sep 26, 2018

andriijas commented on Sep 26, 2018

zaguiini commented on Sep 26, 2018

dmythro commented on Sep 26, 2018

iansu commented on Sep 26, 2018

125 remaining items

nikitowsky commented on Oct 1, 2018

chemitaxis commented on Oct 1, 2018

gaearon commented on Oct 1, 2018

pimlottc-gov commented on Oct 1, 2018

gaearon commented on Oct 1, 2018

pimlottc-gov commented on Oct 1, 2018

JeffBaumgardt commented on Oct 1, 2018

gaearon commented on Oct 1, 2018

JeffBaumgardt commented on Oct 1, 2018

gaearon commented on Oct 1, 2018

gaearon commented on Oct 2, 2018

R4z1ell commented on Oct 13, 2018

gaearon commented on Oct 13, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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

The default Jest environment was changed to `jsdom`

`.mjs` file extension support was removed

Move advanced proxy configuration to `src/setupProxy.js`

The behavior of a CommonJS `import()` has changed