New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Last call for Create React App v2 #5103

Closed
Timer opened this Issue Sep 26, 2018 · 144 comments

Comments

Projects
None yet
@Timer
Collaborator

Timer commented Sep 26, 2018

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 2.0.0-next.xyz

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

Detailed Changelog

>> TODO <<

@Timer Timer added this to the 2.0.0 milestone Sep 26, 2018

@Timer Timer changed the title from Last call for `react-scripts` v2 to Last call for Create React App v2 Sep 26, 2018

@zaguiini

This comment has been minimized.

Show comment
Hide comment
@zaguiini

zaguiini Sep 26, 2018

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

zaguiini commented Sep 26, 2018

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

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Sep 26, 2018

Member

I reworded to

Packages using new JavaScript features in node_modules now work

Does this make more sense?

Member

gaearon commented Sep 26, 2018

I reworded to

Packages using new JavaScript features in node_modules now work

Does this make more sense?

@ozzie1998

This comment has been minimized.

Show comment
Hide comment
@ozzie1998

ozzie1998 Sep 26, 2018

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

node_modules bundled with the app?

ozzie1998 commented Sep 26, 2018

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

node_modules bundled with the app?

@jordyvandomselaar

This comment has been minimized.

Show comment
Hide comment
@jordyvandomselaar

jordyvandomselaar Sep 26, 2018

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.

jordyvandomselaar commented Sep 26, 2018

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.

@zaguiini

This comment has been minimized.

Show comment
Hide comment
@zaguiini

zaguiini Sep 26, 2018

Does this make more sense?

Yes. Thanks Dan!

zaguiini commented Sep 26, 2018

Does this make more sense?

Yes. Thanks Dan!

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Sep 26, 2018

Member

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.

Member

gaearon commented Sep 26, 2018

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.

@z-ax

This comment has been minimized.

Show comment
Hide comment
@z-ax

z-ax Sep 26, 2018

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 commented Sep 26, 2018

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.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Sep 26, 2018

Collaborator

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

Collaborator

Timer commented Sep 26, 2018

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

@andriijas

This comment has been minimized.

Show comment
Hide comment
@andriijas

andriijas Sep 26, 2018

Collaborator

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

Collaborator

andriijas commented Sep 26, 2018

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

@zaguiini

This comment has been minimized.

Show comment
Hide comment
@zaguiini

zaguiini Sep 26, 2018

Just tried here. It works. One question:
image

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?

zaguiini commented Sep 26, 2018

Just tried here. It works. One question:
image

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?

@z-ax

This comment has been minimized.

Show comment
Hide comment
@z-ax

z-ax Sep 26, 2018

@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 commented Sep 26, 2018

@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.

@iansu

This comment has been minimized.

Show comment
Hide comment
@iansu

iansu Sep 26, 2018

Collaborator

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

Collaborator

iansu commented Sep 26, 2018

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

@stramel

This comment has been minimized.

Show comment
Hide comment
@stramel

stramel Sep 26, 2018

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

stramel commented Sep 26, 2018

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

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Sep 26, 2018

Collaborator

@z-ax added the preliminary docs here: 54323f0

The migration instructions above explain exactly how to migrate in the mean time.

Collaborator

Timer commented Sep 26, 2018

@z-ax added the preliminary docs here: 54323f0

The migration instructions above explain exactly how to migrate in the mean time.

@pi0

This comment has been minimized.

Show comment
Hide comment
@pi0

pi0 Sep 26, 2018

@Timer @gaearon Big changes! 🍷 Would you please point to the PR that enables babel for node_modules?

pi0 commented Sep 26, 2018

@Timer @gaearon Big changes! 🍷 Would you please point to the PR that enables babel for node_modules?

@meafmira

This comment has been minimized.

Show comment
Hide comment
@meafmira

meafmira Sep 26, 2018

Have an errors when using flow in node_modules packages (using yarn workspace)

meafmira commented Sep 26, 2018

Have an errors when using flow in node_modules packages (using yarn workspace)

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Sep 26, 2018

Collaborator

@pi0 #3776


@meafmira support for workspaces was dropped. Please see the migration instructions (we know they're not great, but we'll be improving them).

Collaborator

Timer commented Sep 26, 2018

@pi0 #3776


@meafmira support for workspaces was dropped. Please see the migration instructions (we know they're not great, but we'll be improving them).

@z-ax

This comment has been minimized.

Show comment
Hide comment
@z-ax

z-ax Sep 26, 2018

@Timer thanks, everything seems working.
But +1 to @zaguiini about file naming. I liked vendors more, now just have 2 chunks :)

Btw, is it something on my side that chunk 1 has content like this? As I can remember, always had this one on build, for maybe a year or so: (window.webpackJsonp=window.webpackJsonp||[]).push([[1],{1024:function(n,w,o){}}]);.

z-ax commented Sep 26, 2018

@Timer thanks, everything seems working.
But +1 to @zaguiini about file naming. I liked vendors more, now just have 2 chunks :)

Btw, is it something on my side that chunk 1 has content like this? As I can remember, always had this one on build, for maybe a year or so: (window.webpackJsonp=window.webpackJsonp||[]).push([[1],{1024:function(n,w,o){}}]);.

@sumitsg10

This comment has been minimized.

Show comment
Hide comment
@sumitsg10

sumitsg10 Sep 26, 2018

Have errors when using flow in node_modules packages and socket.io

sumitsg10 commented Sep 26, 2018

Have errors when using flow in node_modules packages and socket.io

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Sep 26, 2018

Collaborator

Please file an issue with more details @sumitsg10 and a reproducible demo.

@z-ax naming is pretty arbitrary and actually caused really bad behavior for larger apps. I don't think anyone but you (the developer) will ever notice. :-)

Collaborator

Timer commented Sep 26, 2018

Please file an issue with more details @sumitsg10 and a reproducible demo.

@z-ax naming is pretty arbitrary and actually caused really bad behavior for larger apps. I don't think anyone but you (the developer) will ever notice. :-)

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Sep 26, 2018

Member

I don't think it's expected for Flow to work inside node_modules. We only compile standard JavaScript features inside node_modules. This is an intentional design choice to avoid the churn when proposals change, or new versions of Babel come out. You can ask React Native users about how Babel 7 upgrade went for them.

Member

gaearon commented Sep 26, 2018

I don't think it's expected for Flow to work inside node_modules. We only compile standard JavaScript features inside node_modules. This is an intentional design choice to avoid the churn when proposals change, or new versions of Babel come out. You can ask React Native users about how Babel 7 upgrade went for them.

@lixiaoyan

This comment has been minimized.

Show comment
Hide comment
@lixiaoyan

lixiaoyan Sep 26, 2018

Contributor

Just a question: Why use modules: false for dependencies in test env?

https://github.com/facebook/create-react-app/blob/next/packages/babel-preset-react-app/dependencies.js#L62

Contributor

lixiaoyan commented Sep 26, 2018

Just a question: Why use modules: false for dependencies in test env?

https://github.com/facebook/create-react-app/blob/next/packages/babel-preset-react-app/dependencies.js#L62

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Sep 26, 2018

Collaborator

@lixiaoyan see the above message from @gaearon, the same reasoning applies

Collaborator

Timer commented Sep 26, 2018

@lixiaoyan see the above message from @gaearon, the same reasoning applies

@zaguiini

This comment has been minimized.

Show comment
Hide comment
@zaguiini

zaguiini Sep 26, 2018

naming is pretty arbitrary and actually caused really bad behavior for larger apps. I don't think anyone but you (the developer) will ever notice. :-)

Yup, main is also "pretty arbitrary". Lots of people use vendor as their vendor bundle.
main's also a convention. Why not drop main too? See the point?

zaguiini commented Sep 26, 2018

naming is pretty arbitrary and actually caused really bad behavior for larger apps. I don't think anyone but you (the developer) will ever notice. :-)

Yup, main is also "pretty arbitrary". Lots of people use vendor as their vendor bundle.
main's also a convention. Why not drop main too? See the point?

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Sep 30, 2018

Member

Another thing worth trying is to delete node_modules and re-run npm (or Yarn).

Member

gaearon commented Sep 30, 2018

Another thing worth trying is to delete node_modules and re-run npm (or Yarn).

@Bobgy

This comment has been minimized.

Show comment
Hide comment
@Bobgy

Bobgy Sep 30, 2018

@gaearon oops, I think there were a few things going wrong, so I couldn't reproduce the error now.

In some terminals, I forgot to switch from node 6 to node 10. There might have been modules I installed with npm 3 when I reported the issue. Then I switched to node 10, removed node_modules completely (I must do this) and reran the test, it's all working now.

Sorry for the confusion.

Bobgy commented Sep 30, 2018

@gaearon oops, I think there were a few things going wrong, so I couldn't reproduce the error now.

In some terminals, I forgot to switch from node 6 to node 10. There might have been modules I installed with npm 3 when I reported the issue. Then I switched to node 10, removed node_modules completely (I must do this) and reran the test, it's all working now.

Sorry for the confusion.

@chemitaxis

This comment has been minimized.

Show comment
Hide comment
@chemitaxis

chemitaxis Oct 1, 2018

Hi, we have tried to upgrade to the new version CRA2, but was impossible... we have found errors with decorators (we use MobX), eslint issues and react-toolbox. Previously we have been using react-rewired... We will read carefully the documentation again. We have solved many issues (like eslint dependecies version, removing the node_modules folder).

I have some questions... can we use CRA v2 with decorators without react-rewired? Thanks.

chemitaxis commented Oct 1, 2018

Hi, we have tried to upgrade to the new version CRA2, but was impossible... we have found errors with decorators (we use MobX), eslint issues and react-toolbox. Previously we have been using react-rewired... We will read carefully the documentation again. We have solved many issues (like eslint dependecies version, removing the node_modules folder).

I have some questions... can we use CRA v2 with decorators without react-rewired? Thanks.

@superandrew213

This comment has been minimized.

Show comment
Hide comment

superandrew213 commented Oct 1, 2018

@dangerneck

This comment has been minimized.

Show comment
Hide comment
@dangerneck

dangerneck Oct 1, 2018

yo try make it less configurable and more dogmatic

dangerneck commented Oct 1, 2018

yo try make it less configurable and more dogmatic

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Oct 1, 2018

Member

Hi, we have tried to upgrade to the new version CRA2, but was impossible... we have found errors with decorators (we use MobX), eslint issues and react-toolbox. Previously we have been using react-rewired... We will read carefully the documentation again. We have solved many issues (like eslint dependecies version, removing the node_modules folder).

If you open react-app-rewired README and read the first sentence, it says:

⚠️ ⚠️This repo doesn't support CRA 2.0 see: timarney/react-app-rewired#162 (comment)

Additionally, it says:

By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.

Therefore you shouldn't be surprised that following migration instructions doesn't work for you. That's what you agreed to when you started using react-app-rewired.

can we use CRA v2 with decorators without react-rewired? Thanks.

Indeed you can try this although just like react-app-rewired, we don't intend to support it ourselves. So it may break in other ways on any upgrade.

The reason we don't allow using decorators is because they're an unstable feature, and in fact it has already just changed its semantics. This means your old code using decorators won't work with the new syntax — unless all the libraries you depend on figure out a way to support both syntaxes. Additionally, there are more syntax changes planned for decorators. This is why we'll keep them disabled.

Member

gaearon commented Oct 1, 2018

Hi, we have tried to upgrade to the new version CRA2, but was impossible... we have found errors with decorators (we use MobX), eslint issues and react-toolbox. Previously we have been using react-rewired... We will read carefully the documentation again. We have solved many issues (like eslint dependecies version, removing the node_modules folder).

If you open react-app-rewired README and read the first sentence, it says:

⚠️ ⚠️This repo doesn't support CRA 2.0 see: timarney/react-app-rewired#162 (comment)

Additionally, it says:

By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.

Therefore you shouldn't be surprised that following migration instructions doesn't work for you. That's what you agreed to when you started using react-app-rewired.

can we use CRA v2 with decorators without react-rewired? Thanks.

Indeed you can try this although just like react-app-rewired, we don't intend to support it ourselves. So it may break in other ways on any upgrade.

The reason we don't allow using decorators is because they're an unstable feature, and in fact it has already just changed its semantics. This means your old code using decorators won't work with the new syntax — unless all the libraries you depend on figure out a way to support both syntaxes. Additionally, there are more syntax changes planned for decorators. This is why we'll keep them disabled.

@weyert

This comment has been minimized.

Show comment
Hide comment
@weyert

weyert Oct 1, 2018

What's the advised way to import Markdown files into CRA? Before I used react-app-rewired and made it use the @mapbox/jsxtreme-markdown-loader-loader so that I could generate some semi dynamic markdown files. Maybe I should move to `customize-cra?

Or could I use babel-macros for this instead? Basically I am having a markdown file which becomes a React component and can be used like e.g. <BusinessAgreement {...profileData} /> and then in the markdown I would be able to {{ props.profile.fullName || 'Not provided' }}

weyert commented Oct 1, 2018

What's the advised way to import Markdown files into CRA? Before I used react-app-rewired and made it use the @mapbox/jsxtreme-markdown-loader-loader so that I could generate some semi dynamic markdown files. Maybe I should move to `customize-cra?

Or could I use babel-macros for this instead? Basically I am having a markdown file which becomes a React component and can be used like e.g. <BusinessAgreement {...profileData} /> and then in the markdown I would be able to {{ props.profile.fullName || 'Not provided' }}

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Oct 1, 2018

Member

@weyert Yeah babel-macros should work for this. See #5149 (comment).

Member

gaearon commented Oct 1, 2018

@weyert Yeah babel-macros should work for this. See #5149 (comment).

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Oct 1, 2018

Collaborator

Hi everyone! We just released react-scripts@2.0.2. Please upgrade your apps and ensure everything is still working.

Collaborator

Timer commented Oct 1, 2018

Hi everyone! We just released react-scripts@2.0.2. Please upgrade your apps and ensure everything is still working.

@borisowsky

This comment has been minimized.

Show comment
Hide comment
@borisowsky

borisowsky Oct 1, 2018

So what about TypeScript built-in support?

borisowsky commented Oct 1, 2018

So what about TypeScript built-in support?

@chemitaxis

This comment has been minimized.

Show comment
Hide comment
@chemitaxis

chemitaxis Oct 1, 2018

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

chemitaxis commented Oct 1, 2018

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

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Oct 1, 2018

Member

@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.

Member

gaearon commented Oct 1, 2018

@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.

@pimlottc-gov

This comment has been minimized.

Show comment
Hide comment
@pimlottc-gov

pimlottc-gov Oct 1, 2018

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

pimlottc-gov commented Oct 1, 2018

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
@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Oct 1, 2018

Member

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

Member

gaearon commented Oct 1, 2018

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

@pimlottc-gov

This comment has been minimized.

Show comment
Hide comment
@pimlottc-gov

pimlottc-gov Oct 1, 2018

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

pimlottc-gov commented Oct 1, 2018

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

@JeffBaumgardt

This comment has been minimized.

Show comment
Hide comment
@JeffBaumgardt

JeffBaumgardt Oct 1, 2018

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

JeffBaumgardt commented Oct 1, 2018

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

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Oct 1, 2018

Member

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

Member

gaearon commented Oct 1, 2018

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

@JeffBaumgardt

This comment has been minimized.

Show comment
Hide comment
@JeffBaumgardt

JeffBaumgardt Oct 1, 2018

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.

JeffBaumgardt commented Oct 1, 2018

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.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Oct 1, 2018

Member

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?

Member

gaearon commented Oct 1, 2018

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?

@gaearon

This comment has been minimized.

Show comment
Hide comment
@R4z1ell

This comment has been minimized.

Show comment
Hide comment
@R4z1ell

R4z1ell Oct 13, 2018

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 commented Oct 13, 2018

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?

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Oct 13, 2018

Member

@R4z1ell Please file a new issue.

Member

gaearon commented Oct 13, 2018

@R4z1ell Please file a new issue.

@facebook facebook locked as resolved and limited conversation to collaborators Oct 13, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.