Create-react-app: Hot reload is not working with CSS modules, starting in 3.1.0

[igorstajic]

Describe the bug

Hot reload is not working with CSS modules, after upgrading react-scripts to 3.1.0 or 3.1.1
It works fine with react-scripts 3.0.1

Which terms did you search for in User Guide?

CSS modules hot reload

Environment

System:
OS: macOS 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.10.3 - ~/.nvm/versions/node/v10.16.2/bin/npm
Browsers:
Chrome: 76.0.3809.100
Firefox: 67.0.4
Safari: 12.1.2
npmPackages:
react: ^16.9.0 => 16.9.0
react-dom: ^16.9.0 => 16.9.0
react-scripts: 3.1.1 => 3.1.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Create a new app with "npx create-react-app"
2. Add Test.module.css file and import in in App.js
3. Try editing the css module file, it will reload the whole app.

Expected behavior

Editing the css module should be hot reloaded.

Actual behavior

The whole app is reloaded when the css file is edited.

Reproducible demo

https://github.com/igorstajic/cra-css-module-issue

[thiphariel]

Can confirm here.
And sometimes, it even doesn't reload anything (noticed this since 3.1.0)

[wunnle]

I can confirm this too.

Just created a new project with cra to test this, I can confirm hot reloading works with imported css files, but not with (s)css modules.

Edit: Also just downgraded to 3.0.1 and hot reloading works perfectly on that version.

[chaitan94]

Not working in 3.1.2 either. Did anyone get a chance to look into this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[Torvin]

It is still reproducible in the latest version. Is anybody working on this?

[jayantbh]

I'm on react-scripts 3.3.0-next.62, and SCSS Modules changes trigger a full reload instead of hot-reloading like before.
I jumped from 2.1.5.

[adambowles]

Still not fixed in 3.3.0

[spud93]

I'm having issues with hot reloading SCSS files in version 3.3.0.

[wunnle]

Same here, 3.3.0 still reloading the whole page

On 7 Dec 2019 Sat at 23:53 Thomas Smith [e-mail] wrote:

I'm having issues with hot reloading SCSS files in version 3.3.0.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/7561?email_source=notifications&email_token=AAJOJIVN2TSZYGVPARYHEM3QXQENVA5CNFSM4IMT7ASKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGGPGZQ#issuecomment-562885478,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAJOJIXTKCCNSOTYHCAOLNDQXQENVANCNFSM4IMT7ASA
.

[inkubux]

Same here but with less instead os scss.

Anybody have workaround ?

[chickenwing]

Wondering, did this ever work with styled components?

[wunnle]

Same here but with less instead os scss.

Anybody have workaround ?

You can downgrade until the issue is fixed. 3.0.1 doesn't have this problem

[deluksic]

Also having this issue with 3.3.0

[chybisov]

Same here with 3.3.0, is there any estimation for fix?

[Kiyozz]

3.3.0 same issue: I can't downgrade due to my Eslint config (> 6.1.0)

[lukecaan]

Bump

[adambowles]

Same here with 3.3.0, is there any estimation for fix?

🤷‍♂️

[Grawl]

The only workaround I found is to downgrade react-scripts to 3.0.1

-"react-scripts": "3.3.0"
+"react-scripts": "3.0.1"

[jayantbh]

^ the only reason I'm on 3.3.0 is because of the TS upgrades (introduced in 3.3.0-next.62).
So, if anyone else is on this version for similar reasons, this might be something worth considering. This is also why I won't be downgrading just yet.

[Grawl]

In theory, you can add TS upgrades from 3.3.0 on 3.0.1 using react-app-rewired and customize-cra

[adambowles]

Seeing as the issue started in 3.1.0, then it must be part of this diff: https://github.com/facebook/create-react-app/compare/v3.0.1...v3.1.0

I've had a quick look through and can't see anything that might be causing it, maybe it's in one of the updated dependencies?

[Grawl]

Just checked it out with [email protected] and figured out downgrading back following dependencies not solve this issue

"react-dev-utils": "^9.0.1",
"style-loader": "0.23.1",
"pnp-webpack-plugin": "1.2.1",

[lukecaan]

I really don't have any understanding at all about how this stuff works under the hood, so forgive me if I'm saying anything irrelevant/stupid, but I noticed that a new project I created a few days ago is hot reloading fine, while my older one doesn't.

Just to see if I could fix the old one, I've put them both on the exact same versions of:
react: "^16.8.6",
"react-scripts": "3.2.0",
"node-sass": "4.13.1",

cleared yarn and npm caches, deleted node_modules in both, deleted lock files in both, and then reinstalled ... but still the newer project is hot reloading perfectly, and the older one not ... what else could possibly be causing the issue??

[Grawl]

it's something in 3.1.0 update dude

[skymakerolof]

In my case, hot reloading works fine using react-scripts 3.1.2 or 3.2.0, but stop working if I upgrade to 3.3.0. I'm trying to upgrade to 3.3.0 in order to get support for typescript optional chaining. Using node-sass in this project.

[Migggz]

The same issue with react-scripts 3.3.0, I downgraded to 3.2.0 and it works fine

[chybisov]

@adambowles @jayantbh @Grawl I just checked what dependency exactly cause issue between _3.0.1_ and _3.1.0_ and this is definitely due to upgrading style-loader to version 1.0.0. This version introduce some BREAKING CHANGES and these two seems exactly what we are looking for

• the hmr option was removed, webpack automatically inject HMR code when it is required (when the HotModuleReplacementPluginplugin was used)
• the sourceMap option was removed. The loader automatically inject source maps if the previous loader emit them

Also I've tested downgrading style-loader to _0.23.1_ in react-scripts _3.3.0_ and that's works pretty fine. BUT, due to unreleased fix for webpackHotDevClient (#8075 #8079 #8084) it's still not work under https connection. After applying above fix everything works.

Finally I think we need to apply some changes to custom webpackHotDevClient to work with new version of style-loader due to those breaking changes.

Also please check this style-loader issue.

[Torvin]

Looks like this has been fixed in #8378? Appears to be working now in v3.4.0

[chybisov]

@Torvin yep :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.