Next.js uses <script> tag to load css files in static export

[Neet-Nestor]

Link to the code that reproduces this issue

https://github.com/mlc-ai/web-llm-chat

To Reproduce

Open https://chat.webllm.ai/ , or clone the repo and generate static export using npm run export.

Current vs. Expected behavior

Currently, in console you will see error Uncaught SyntaxError: Unexpected token '.' (at 627a518ee201154a.css:1:1) since the html incorrects loads css as JavaScript:

<link rel="preload" href="/_next/static/css/627a518ee201154a.css" as="script">
<script src="/_next/static/css/627a518ee201154a.css" async=""></script>

Expected behavior: The css file should be loaded as stylesheet instead of as script.

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:32:11 PDT 2023; root:xnu-10002.41.9~7/RELEASE_ARM64_T6030
    Binaries:
      Node: 22.1.0
      npm: 10.7.0
      Yarn: 1.22.22
      pnpm: N/A
    Relevant Packages:
      next: 13.4.9
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.4.5
    Next.js Config:
      output: export

Which area(s) are affected? (Select all that apply)

Output (export/standalone)

Which stage(s) are affected? (Select all that apply)

next build (local), Other (Deployed)

Additional context

No response

[icyJoseph]

Hi,

Can you try to create a minimal reproduction repository? Remove as much as possible from the app, but keep the issue. A branch in your repo would be sufficient. There's quite a lot going on in your app, it is not gonna be trivial to figure out the root issue.

[Neet-Nestor]

@icyJoseph Thanks for looking into the issue. I just created a branch where most files have been removed but still kept a minimal UI page here:

https://github.com/mlc-ai/web-llm-chat/tree/script_bug

To reproduce the issue:

git checkout script_bug
yarn export

Then in the generated out/index.html file, you can find the following lines:

    <link
      rel="preload"
      href="/_next/static/css/1a9a940e36014213.css"
      as="script"
    />

    <script src="/_next/static/css/1a9a940e36014213.css" async=""></script>

Serving the website generates the error:

npx serve --ssl-cert ./cert.pem --ssl-key ./key.pem out

[icyJoseph]

Hi,

Removing this from your next.config file:

    if (disableChunk) {
      config.plugins.push(
        new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
      );
    }

Fixes the issue, why did you implement this? What's the goal, can it be dropped? Does it need further tweaking from your side?

Already calling this, not a Next.js issue, but let's see.

[Neet-Nestor]

Thank you! I confirmed the issue is resolved after removing this plugin.

This repo is forked from another open source project so I'm not sure why the author added this in the first place.

Before closing this issue, I wonder whether you have any idea on why this plugin caused this issue? Or is this something I should consult webpack for?

[icyJoseph]

No idea. You need to read the webpack documentation for that plugin.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.