webpack5 non-deterministic chunk name when importing css

[tunesmith]

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

14.16.0

What browser are you using?

chrome, safari

What operating system are you using?

macOS

How are you deploying your application?

pm2 - npm run build on each server

Describe the Bug

When using webpack5, npm run build is not as idempotent as it should be, when using a custom app that imports css.

After deleting .next, npm run build creates one set of output, and a second npm run build creates different output - specifically, static/chunks/webpack-[hash].js has a different hash.

This does not happen when css is not imported. It does not happen when using webpack4.

Expected Behavior

When using webpack5, chunk names should be the same across builds and rebuilds when the content does not change.

To Reproduce

Start with https://github.com/vercel/next.js/tree/canary/examples/with-typescript .

Add styles/globals.css (the content probably doesn't matter):

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Add next.config.js for a consistent buildId:

module.exports = {
    generateBuildId: () => 'BUILD'
}

Add a custom _app.js:

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Invoke npm run build. Note the static/chunks/webpack-[hash].js name. Invoke npm run build again. Note the filename is different. This is the bug.

Delete .next. Comment out import '../styles/globals.css'. npm run build twice again - this time, the filename remains the same.

Delete .next. Uncomment import '../styles/globals.css'. Add future: { webpack5: false, }, to next.config.js . npm run build twice again - again, the filename remains the same.

So webpack5 and nextJS are being non-deterministic somehow when css is imported.

Impact: We are currently experiencing a production bug with NextJS and webpack5 where our chunk filenames are not deterministic across our multiple servers. Not sure if this bug is related, but downgrading to webpack4 fixes it. I had a hard time isolating the cause on our large codebase, but I did find this. Also might be related to #24116.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.