Create-react-app: When I add a new package I have to restart

[bernatfortet]

Is there anyway to not have to restart (npm start) the server when I add a new package?

[gaearon]

This used to work. Can you provide more details? Exact way to reproduce, which package you were installing, how it didn't work, etc.

[miraage]

Kinda strange. WatchMissingNodeModulesPlugin works like a charm for me in CRA-apps and my own webpack configurations.

[supra28]

:O I thought that was normal.
@gaearon I always stop the server then install a package and start the server again. Is there a better way to do it?

[gaearon]

It should just work if you install a package in a separate terminal session. Without restarting.
If it doesn't work this is a bug and someone should look into it.

[gaearon]

Tagging as up for grabs: we need someone to try reproducing it, and report whether it is reproducible or not.

[reznord]

@gaearon, I am not able to reproduce this issue.

These are the following steps what I've followed to test this issue:

• start dev server using yarn start
• open another terminal and install qs package (didn't stop the server)
• then went to src/app.js and tried to render the URL query parameters values.
• HRM reloaded with the rendering the query parameters

[gaearon]

@reznord Thanks for trying!

@supra28 Can you verify if the same steps cause the issue for you? Or if you can suggest other steps that cause it, it would be helpful.

[supra28]

@reznord @gaearon I followed these steps:

• start dev server using yarn start.
• imported the package react-scroll-effects and used it in the code without installing it. (error obviously).
• open another terminal and install react-scroll-effects.
• HMR didn't work after installing the package. (Is this expected?)
• edited the code and saved it and HMR reloaded the page correctly.

and I did this:

• In the 2nd terminal uninstalled the package.
• The code still worked even after editing and saving multiple times.

[reznord]

HMR didn't work after installing the package. (Is this expected?)

Yes, HMR works only when there is a change CSS/JS files.

In this case, it will work if you are making some changes in the JS file and save it. It will work perfectly without any errors.

[supra28]

@reznord I think there is still some bug because manually reloading the tab didn't trigger a rebuild, it only worked after editing code and saving it, ideally WatchMissingNodeModulesPlugin should have triggered a rebuild.

[tnrich]

I find this to be happening not for brand new installs, but for updates of existing node modules. Like if I run yarn upgrade package-x, I find I have to manually restart the dev server to get those changes to appear. Should that work out of the box as well? Thank you!

[gaearon]

That should work, but I don’t think we tested with Yarn. Maybe it only worked with npm.

[reznord]

manually reloading the tab didn't trigger a rebuild

@supra28 I'm not sure how that is related to this. Manually reloading a tab will not trigger a rebuild. Because HMR will not be fired every time you refresh the tab. HRM looks for changes in JS/CSS files.

Reloading the tab doesn't fire HMR since no changes in JS/CSS are made.

[tnrich]

@gaearon , rebundling on yarn upgrade is definitely not working with the following commands:

In terminal tab #1:

(using latest version of [email protected])
create-react-app yarn-upgrade-test
cd yarn-upgrade-test/
yarn start

In terminal tab #2:

yarn add semver-console@0

At the top of yarn-upgrade-test/src/App.js add:

import "semver-console";

in the browser console you'll now see:

SEMVER: 0.0.0

In terminal tab #2 run:

yarn upgrade semver-console@1

in the browser console you'll still see:

SEMVER: 0.0.0

instead of the expected

SEMVER: 1.0.0

https://github.com/tnrich/semver-console

[supra28]

@reznord Sorry that's not what I meant, what I meant was shouldn't WatchMissingNodeModulesPlugin already trigger a rebuild after installing a new package even if i didn't make any change to the js/css files?
If it worked I should see the new page after manually reloading because the build should contain the new package now. Not talking about HMR.

[gaearon]

Closing in favor of https://github.com/facebookincubator/create-react-app/issues/2956 which is more focused.