Granular chunks load CSS as JS

Bug report

Describe the bug

After enabling granular chunks, CSS is loaded as JS in the body.

In the head, there’s

<link rel="stylesheet" href="https://static.real.dev/web/_next/static/css/6519939e08f60c2b0fdda52a767add1b5303a0f3.8812c13c.chunk.css">

In the body there is

<script src="/_next/static/css/6519939e08f60c2b0fdda52a767add1b5303a0f3.8812c13c.chunk.css"></script>

And note the assetPrefix isn’t being prepending to the body tag.

To Reproduce

Unfortunately, I have to revert the change on my prod to stop error. Hopefully this can be easily re-produced, it seems like a pretty universal error.

Expected behavior

It should work.

Screenshots

SyntaxError: expected expression, got '.'6519939e08f60c2b0fdda52a767add1b5303a0f3.8812c13c.chunk.css:1

System information

• OS: macOS

• Browser (if applies): Different browsers behave variously.

  • Firefox errors out when loading the page
  • Chrome only errors when doing client-side routing
  • Chrome, on first page load, have two preload tag in the head pointing to the same CSS, one with assetPrefix, one without
  • Firefox on the other hand, has only one, maybe it’s because the syntax error triggers right away preventing it from going forward

• Version of Next.js: 9.0.6

Additional context

Add any other context about the problem here.

[dnmahendra]

Can someone look into this, please? It is happening in the version 9.1.4 too.

[abraxxas]

Still encountering this issue with next 9.1.1, the server rendered output seems to be correct <link rel="stylesheet" href="/_next/static/css/static/balh/blah/blah/blah.js.0c20549d.chunk.css"/> but when i do client side navigation to the same page <script src="/_next/static/css/static/balh/blah/blah/blah.js.0c20549d.chunk.css"></script>