Gatsby: CSS Modules (Gatsby v2) - New css styles not hot reloading. Requires a page refresh

[jonlow]

Description

When adding a new class to a css module, hot reload does not inject the css module class and no styles are shown. Manually refreshing the page will show the new css module class and the correct styles.

Once the page has been manually refreshed after creating a new class, any subsequent changes to the class will hot reload correctly.

Screencast of the issue https://www.useloom.com/share/a1061fb2d4344942af1f9efa4870d965

Note: I've checked gatsby v1 and new css modules display correctly without a page refresh

Steps to reproduce

I can confirm this is an issue using the latest:

• Gatsby Starter Default https://github.com/gatsbyjs/gatsby-starter-default
• Using CSS Modules example https://github.com/gatsbyjs/gatsby/tree/master/examples/using-css-modules

Expected result

New css module classes should hot reload and display on the page (after saving) without a manual page refresh

Actual result

No styles show up on the page. A manual page refresh is required

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i7-4650U CPU @ 1.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - /usr/local/bin/node
Yarn: 1.12.3 - ~/.yarn/bin/yarn
npm: 4.2.0 - ~/.npm-packages/bin/npm
Browsers:
Chrome: 70.0.3538.110
Firefox: 63.0.3
Safari: 12.0.1
npmPackages:
gatsby: ^2.0.53 => 2.0.63
gatsby-image: ^2.0.20 => 2.0.22
gatsby-plugin-manifest: ^2.0.9 => 2.0.11
gatsby-plugin-offline: ^2.0.16 => 2.0.18
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.4
gatsby-plugin-sharp: ^2.0.14 => 2.0.14
gatsby-source-filesystem: ^2.0.8 => 2.0.10
gatsby-transformer-sharp: ^2.1.8 => 2.1.9
npmGlobalPackages:
gatsby-cli: 2.4.6

[DSchau]

If you check your console when this happens, do you see something like the below?

Error: Aborting CSS HMR due to changed css-modules locals.

It seems to possibly be related to webpack-contrib/style-loader#320

[jonlow]

@DSchau sure does!. Happens when you create a new class in a component css file and save. Once you do a manual refresh the error doesn't happen.

[jonlow]

I think it's related to changes introduced in this PR https://github.com/webpack-contrib/style-loader/pull/298

[wearegoose]

I'm facing the same issue. Does anybody know how to resolve the issue?

[jonlow]

@wearegoose

As per recent convos in https://github.com/webpack-contrib/style-loader/issues/320, it seems that a full page reload is aways required for CSS Modules when using react hot loader like Gatsby does. I've managed to fix it using the below...

The solution is to pass {hmr: false} to style-loader when CSS modules are being used.

This will mean passing the hmr option to miniCssExtract in webpack-utils.js (eg miniCssExtract({hmr: false})) in gatsby core when CSS modules are being used. @DSchau is there an elegant way to do this? Otherwise I'll make a PR.

In my case, I'm using css modules with the SASS plugin, so it would make sense to make a PR and add the hmr: false to the plugin itself like so:

[jonlow]

Can I get someone to please review my PR? https://github.com/gatsbyjs/gatsby/pull/11032

This is for SASS files, but I'll add another PR for regulare CSS modules once the SASS PR gets through

[wardpeet]

PR is merged! thank you very much!