Hot reload is not working with CSS modules, starting in 3.1.0 #7561

igorstajic · 2019-08-18T20:07:01Z

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

Create a new app with "npx create-react-app"
Add Test.module.css file and import in in App.js
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 · 2019-08-29T07:10:50Z

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

wunnle · 2019-08-31T08:59:06Z

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 · 2019-09-25T05:48:09Z

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

stale · 2019-10-25T06:07:28Z

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 · 2019-10-25T06:22:48Z

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

jayantbh · 2019-11-22T07:37:06Z

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 · 2019-12-05T09:42:18Z

Still not fixed in 3.3.0

spud93 · 2019-12-07T20:53:44Z

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

wunnle · 2019-12-08T12:39:38Z

Same here, 3.3.0 still reloading the whole page

…

On 7 Dec 2019 Sat at 23:53 Thomas Smith ***@***.***> 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 <#7561?email_source=notifications&email_token=AAJOJIVN2TSZYGVPARYHEM3QXQENVA5CNFSM4IMT7ASKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGGPGZQ#issuecomment-562885478>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJOJIXTKCCNSOTYHCAOLNDQXQENVANCNFSM4IMT7ASA> .

sudo-tee · 2019-12-20T13:05:49Z

Same here but with less instead os scss.

Anybody have workaround ?

dev-bjoern · 2019-12-20T13:09:44Z

Wondering, did this ever work with styled components?

wunnle · 2019-12-20T13:50:16Z

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 · 2019-12-21T11:27:17Z

Also having this issue with 3.3.0

chybisov · 2020-01-06T11:40:25Z

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

Kiyozz · 2020-01-08T15:42:43Z

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

lukecaan · 2020-01-09T10:52:17Z

Bump

adambowles · 2020-01-16T16:18:54Z

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

🤷‍♂️

Grawl · 2020-01-21T05:58:38Z

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 · 2020-01-21T08:54:09Z

^ 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 · 2020-01-21T09:53:38Z

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

adambowles · 2020-01-21T12:58:35Z

Seeing as the issue started in 3.1.0, then it must be part of this diff: 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 · 2020-01-22T01:28:42Z

Just checked it out with react-scripts@3.3.0 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 · 2020-01-24T02:00:06Z

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 · 2020-01-24T02:39:18Z

it's something in 3.1.0 update dude

skymakerolof · 2020-01-24T12:54:42Z

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 · 2020-01-25T23:16:13Z

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

chybisov · 2020-01-26T11:23:13Z

@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 HotModuleReplacementPlugin plugin 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 · 2020-02-21T01:22:44Z

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

chybisov · 2020-02-21T07:06:18Z

@Torvin yep :)

See facebook/create-react-app#7561

stale · 2020-03-22T07:08:15Z

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.

igorstajic added issue: bug report needs triage labels Aug 18, 2019

igorstajic changed the title ~~Hot reload is not working with CSS modules~~ Hot reload is not working with CSS modules, starting in 3.1.0 Aug 18, 2019

stale bot added the stale label Oct 25, 2019

stale bot removed the stale label Oct 25, 2019

thiphariel mentioned this issue Dec 20, 2019

CSS edits cause the whole application to reload on the browser. #7665

Closed

chybisov mentioned this issue Jan 26, 2020

Downgrade style-loader to v0.23.1 due to CSS modules hot reload not working with v1.0.0 and above #8378

Merged

hatton added a commit to BloomBooks/BloomLibrary2 that referenced this issue Feb 27, 2020

Upgrade react app to remove hot-loader problem

7634ed3

See facebook/create-react-app#7561

stale bot added the stale label Mar 22, 2020

ianschmitz closed this as completed Mar 23, 2020

lock bot locked and limited conversation to collaborators Mar 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hot reload is not working with CSS modules, starting in 3.1.0 #7561

Hot reload is not working with CSS modules, starting in 3.1.0 #7561

igorstajic commented Aug 18, 2019 •

edited

Loading

thiphariel commented Aug 29, 2019

wunnle commented Aug 31, 2019 •

edited

Loading

chaitan94 commented Sep 25, 2019

stale bot commented Oct 25, 2019

Torvin commented Oct 25, 2019

jayantbh commented Nov 22, 2019 •

edited

Loading

adambowles commented Dec 5, 2019

spud93 commented Dec 7, 2019

wunnle commented Dec 8, 2019 via email

sudo-tee commented Dec 20, 2019

dev-bjoern commented Dec 20, 2019 •

edited

Loading

wunnle commented Dec 20, 2019

deluksic commented Dec 21, 2019

chybisov commented Jan 6, 2020

Kiyozz commented Jan 8, 2020

lukecaan commented Jan 9, 2020

adambowles commented Jan 16, 2020

Grawl commented Jan 21, 2020

jayantbh commented Jan 21, 2020

Grawl commented Jan 21, 2020 •

edited

Loading

adambowles commented Jan 21, 2020 •

edited

Loading

Grawl commented Jan 22, 2020

lukecaan commented Jan 24, 2020

Grawl commented Jan 24, 2020

skymakerolof commented Jan 24, 2020

Migggz commented Jan 25, 2020

chybisov commented Jan 26, 2020 •

edited

Loading

Torvin commented Feb 21, 2020

chybisov commented Feb 21, 2020

stale bot commented Mar 22, 2020

Hot reload is not working with CSS modules, starting in 3.1.0 #7561

Hot reload is not working with CSS modules, starting in 3.1.0 #7561

Comments

igorstajic commented Aug 18, 2019 • edited Loading

Describe the bug

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

thiphariel commented Aug 29, 2019

wunnle commented Aug 31, 2019 • edited Loading

chaitan94 commented Sep 25, 2019

stale bot commented Oct 25, 2019

Torvin commented Oct 25, 2019

jayantbh commented Nov 22, 2019 • edited Loading

adambowles commented Dec 5, 2019

spud93 commented Dec 7, 2019

wunnle commented Dec 8, 2019 via email

sudo-tee commented Dec 20, 2019

dev-bjoern commented Dec 20, 2019 • edited Loading

wunnle commented Dec 20, 2019

deluksic commented Dec 21, 2019

chybisov commented Jan 6, 2020

Kiyozz commented Jan 8, 2020

lukecaan commented Jan 9, 2020

adambowles commented Jan 16, 2020

Grawl commented Jan 21, 2020

jayantbh commented Jan 21, 2020

Grawl commented Jan 21, 2020 • edited Loading

adambowles commented Jan 21, 2020 • edited Loading

Grawl commented Jan 22, 2020

lukecaan commented Jan 24, 2020

Grawl commented Jan 24, 2020

skymakerolof commented Jan 24, 2020

Migggz commented Jan 25, 2020

chybisov commented Jan 26, 2020 • edited Loading

Torvin commented Feb 21, 2020

chybisov commented Feb 21, 2020

stale bot commented Mar 22, 2020

igorstajic commented Aug 18, 2019 •

edited

Loading

wunnle commented Aug 31, 2019 •

edited

Loading

jayantbh commented Nov 22, 2019 •

edited

Loading

dev-bjoern commented Dec 20, 2019 •

edited

Loading

Grawl commented Jan 21, 2020 •

edited

Loading

adambowles commented Jan 21, 2020 •

edited

Loading

chybisov commented Jan 26, 2020 •

edited

Loading