Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] CSS Module + ReactRouter: ClassNames aren't added to the generated HTML

See original GitHub issue

The inital load of any of my pages lacks the proper classes, thus the stylling is all wrong on initial load.

Environment

  System:
    OS: Windows 10
    CPU: (8) x64 AMD FX(tm)-8350 Eight-Core Processor
    Memory: 16.56 GB / 31.98 GB
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 5.3.0 - C:\Users\me\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
    Internet Explorer: 11.0.17763.1
  npmPackages:
    react: ^16.8.2 => 16.8.6
    react-dom: ^16.8.2 => 16.8.6
    react-router-dom: ^5.0.0 => 5.0.0
    react-static: ^7.0.0 => 7.0.10
    react-static-plugin-css-modules: ^7.0.8 => 7.0.8
    react-static-plugin-react-router: ^7.0.8 => 7.0.8
    react-static-plugin-sitemap: ^7.0.0 => 7.0.0
    react-static-plugin-source-filesystem: ^7.0.0 => 7.0.0
    react-transition-group: ^4.0.0 => 4.0.0

Expected Behavior

yarn start and yarn build yield same result. Initial load has classNames/styles as appropriate.

Note that navigation using <Link /> components causes rerendering of that particular element, thus causing the classNames to get applied.

Reproducible Demo

https://github.com/rickyrombo/react-static-css-modules-bug

Issue Analytics

State:
Created 4 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

2reactions

Shipleavescommented, May 2, 2019

This affects me too, would be great to see this fixed.

1reaction

DominikGuzeicommented, Jan 1, 2020

I just ran into this issue with the latest react-static@7.2.3 version. The stylesheet gets generated correctly but the built, static DOM does not have the classes assigned - so the styles are not applied with Javascript turned off - this only happens after the react app was mounted. @benedfit can you tell me how you solved the issue?

EDIT: nevermind, i solved the issue by copying the setup of the css-modules plugin into my custom sass plugin … exportOnlyLocals: true was the important part:

// Node
// Don't extract css to file during node build process
loaders = [{
  ...cssLoader,
  options: {
    ...cssLoader.options,
    exportOnlyLocals: true,
  },
}, sassLoader]