Button.module.css does not get applied

[adie]

It looks like this example doesn't work with the CSS modules. I checked out the example and ran npm run happo run, but all I got was this:

No styles were applied from Button.module.css (like the text color or bold)

Is there any easy workaround or this is broken?

[trotzig]

Hi @adie! Thanks for the report. I can confirm this is broken (and has probably been that way for a while). It's related to how next.js has different behavior for dev vs prod mode for css modules. In dev, the styles are inlined in the DOM (I think) and in prod there's an external css file created which is referenced in a <link> element. Happo fails to resolve the external css file, so styles will be missing. This is fixable either by forcing inlined styles when Happo is run, or by adding a stylesheets option to .happo.js (the issue then is determining the full path to the fingerprinted css file).

It should be noted that the version of next.js here is quite old, so I suggest fixing this by upgrading next and/or reworking the happo setup. I can't make any promises when that could happen though. In the meantime, I'll be happy to assist if you're setting up a fresh next.js project with Happo (just reach out to support@happo.io if you don't want to share details here).

[adie]

So I worked around it as you suggested with stylesheets option but as I can't get stylesheets before webpack builds I decided to run yarn build first and only then run Happo with the following config:

  stylesheets: fs.readdirSync(path.resolve(__dirname, '.next/static/css'))
    .map(f => path.resolve(__dirname, '.next/static/css', f)),
  publicFolders: [
    path.resolve(__dirname, 'public')
  ],

New version of next.js still doesn't fix anything, it even introduces one more problem

TypeError: Cannot read property 'traceChild' of undefined
    at .../node_modules/next/build/webpack/plugins/profiling-plugin.ts:46:21

Which I was able to solve in .happo.js by adding:

const { trace } = require('next/dist/telemetry/trace')
...
  customizeWebpackConfig: async config => {
...
    const base = await nextWebpackConfig(__dirname, {
...
      runWebpackSpan: trace('next-build')
    })
...

I got that working for myself with those workarounds but would be really good to get some upstream support.
Let me know if you want me to get deeper into it, but basically you can reproduce all of that in this happo-next-demo project.