Advertised upgrade path isn't working with yarn

[AsaAyers]

Can you reproduce the problem with latest npm?

No, when I followed the npm instructions here it seemed to work.

yarn.lock seems to be the issue here.

Description

I have a project using react-scripts@0.7.0 using yarn and proxy.

Reset my node_modules for 0.7.0: rm -rf node_modules/; yarn
Upgrade: npm install --save-dev --save-exact react-scripts@0.8.4

This is a symptom, not the actual problem: At this point webpack doesn't rewrite the Access-Control-Allow-Origin header and my app won't run.

I also tried yarn upgrade react-scripts and it gets the same result.

Workaround

After updating package.json I can rm yarn.lock && yarn and everything works. But I didn't find that until I came to file this issue and your instructions insisted I try with npm. I suspect the same problem applies to shrinkwrapped projects, but mine isn't so I can't verify that.

This doesn't seem like a good solution as I just upgraded an unknown number of packages. The diff of yarn.lock is 5,162 lines.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): react-scripts@0.8.4
2. node -v: v6.2.0
3. npm -v:4.0.5

Then, specify:

1. Operating system: Ubuntu Linux
2. Browser and version: Chrome Version 55.0.2883.21 beta (64-bit)

Reproducible Demo

I don't know how to create an app with 0.7, lock the versions of everything and upgrade to 0.8.

[gaearon]

If you use Yarn, shouldn't you be updating with Yarn too?
I'm not sure how it would behave together with npm.

Does this work?

yarn upgrade react-scripts@0.8.4

[AsaAyers]

No, that has the same problem. I think the problem is that react-scripts gets updated, but none of the things it depends on are getting upgraded. In this case I suspect it's Webpack since it does the proxying, but it's hard to tell from here.

[gaearon]

It's a bit hard to say what's going wrong, help looking into it is appreciated. This could be a Yarn bug for example.

I think the problem is that react-scripts gets updated, but none of the things it depends on are getting upgraded.

I'd be surprised if some change in 0.8 is suddenly incompatible with the version of webpack used by 0.7. But I'm not sure. What makes you think this is the case?

[AsaAyers]

I don't think it's incompatible exactly, but the behavior changed. In my case it changes from giving me an Access-Control-Allow-Origin of http://localhost:3000 to http://localhost:8080, which is the proxy referenced in my package.json.

Is there a way for me to run create-react-app and generate a project with an older version of react-scripts? Maybe I need to create an app and downgrade? I'm trying to provide as much info as possible, but it did take me an hour to debug and write this issue, it started with me thinking 0.8 was broken, but that's not really the case here.

[gaearon]

Isn't this #1212?
(Added in 0.8.4.)

Does it break your use case?

[AsaAyers]

That is the same symptom, but I think I'm making progress. I reset my project master (0.7.0), ran yarn upgrade react-scripts@0.8.4 and can still see that error. node_modules/react-scripts/scripts/start.js even shows the change for #1212.

I created a new project that is running 0.7.0 in master.

• master - I just created a new project, manually changed package.json, removed yarn.lock and ran yarn.
• failed-upgrade - I just ran yarn upgrade react-scripts@0.8.4
• manual-upgrade - I removed yarn.lock and manually edited package.json, then ran yarn to create a new lock file.

https://github.com/AsaAyers/cra-1374/blob/master/tmp.diff shows the difference between yarn ls across the two branches. There are a surprising number of differences.

Do you think this is worth pursuing any further?

[gaearon]

You would need to find which package was responsible for the behavior change you are observing. It is not clear to me.

[gaearon]

Did you find the cause?

[AsaAyers]

I think I found the package causing the error, but I don't understand why or how.
Our server is powered by https://www.nuxeo.com/ so we're using the client they provide to make requests.

react-scripts@0.7 + nuxeo@2.0.2 works
react-scripts@0.8 + nuxeo@2.0.2 fails
react-scripts@0.8 + nuxeo@2.2 works, but they stopped compiling the code you get from importing nuxeo, so now we have to import nuxeo/dist/nuxeo and just live with this warning.

I don't understand what nuxeo could be doing that anything < 2.2 is incompatible with react-scripts@0.8. At this point I'm not sure the error was related to the Access-Control-Allow-Origin header because it's still coming back as the Nuxeo server's address instead of the Webpack server's address. But my browser isn't complaining about this, so maybe it's not a problem?

[AsaAyers]

If I revert back to master where I have react-scripts@0.7 and nuxeo@2.0.2, the Access-Control-Allow-Origin and Origin headers to match: