Next.js 7 causes hash collision for CSS Modules

[leinelissen]

Bug report

Describe the bug

During the upgrade of our Next.js application to version 7, I noticed a weird thing happening to our CSS. To explain the issue I've included a repository which shows the problem: https://github.com/leinelissen/nextjs7-css-issue. It shows a basic setup with two pages, each importing an CSS file, containing a declaration with a classname that is exactly the same. It uses the @zeit/next-css package with CSS Modules enabled. When everything is built, the classnames are transformed, but the hash is exactly the same, which causes the styles to collide.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Pull https://github.com/leinelissen/nextjs7-css-issue
2. npm run build
3. npm start
4. Inspect styles for the page div

Expected behavior

The transformed hashes for the imported classnames to not be the same.

Screenshots

System information

• OS: macOS, node 10.10
• Browser (if applies) does not apply, but confirmed on Safari and Chrome
• Version of Next.js: 7.0.0

Additional context

I get that this is a problem with the next-css package, but I've examined the code and since I believe nothing in the package has changed that could cause this bug, I'm inclined to believe it is a problem with the Webpack setup. If this is not the case, or if it's something that should be fixed with the package, I'll move my issue over there.

[ajliv]

I ran into this yesterday on the canary release, and it does appear to be a dependency issue of @zeit/next-css

Has to do with the version of css-loader that package is using and webpack 4's rootContext. It was actually fixed in the patch version above what's currently being required (webpack-contrib/css-loader#681). A simple bump of css-loader from 0.28.9 to 0.28.10 on their part should fix it (Although css-loader@1.0.0 has also since been released.)

Until that happens, a short term solution you can do right away to fix:

1. yarn add -D css-loader@0.28.10

2. In package.json add:

"resolutions": {
  "css-loader": "0.28.10"
}

[leinelissen]

If this is an issue with the next-plugin, I'll close this bug and support the issues that are over there. Nice catch @ajliv !

[timneutkens]

Fixed in vercel/next-plugins@91bf70a