Skip to content

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

Closed
@igorstajic

Description

@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

Activity

changed the title [-]Hot reload is not working with CSS modules[/-] [+]Hot reload is not working with CSS modules, starting in 3.1.0[/+] on Aug 18, 2019
thiphariel

thiphariel commented on Aug 29, 2019

@thiphariel

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

wunnle

wunnle commented on Aug 31, 2019

@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

chaitan94 commented on Sep 25, 2019

@chaitan94

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

stale

stale commented on Oct 25, 2019

@stale

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

Torvin commented on Oct 25, 2019

@Torvin

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

jayantbh

jayantbh commented on Nov 22, 2019

@jayantbh
Contributor

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

adambowles commented on Dec 5, 2019

@adambowles
Contributor

Still not fixed in 3.3.0

spud93

spud93 commented on Dec 7, 2019

@spud93

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

wunnle

wunnle commented on Dec 8, 2019

@wunnle

26 remaining items

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @sudo-tee@Grawl@dev-bjoern@wunnle@thiphariel

        Issue actions

          Hot reload is not working with CSS modules, starting in 3.1.0 · Issue #7561 · facebook/create-react-app