Styling broken on route navigation when using vanilla-extract

[ssijak]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.18.1
    Relevant Packages:
      next: 13.4.14-canary.1
      eslint-config-next: 13.4.5
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.4
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://share.cleanshot.com/2HmrBYgs

To Reproduce

Use only pages dir, implement styling via vanilla-extract, navigate between pages using router

Describe the Bug

Styles are broken after navigating to a different page, but on full page loads they are fine
On version "next": "13.4.5", everything works fine, but after that version where big push was made with a lot of optimizations for the app dir, a lot of things started breaking for us, like styling as seen in the video and hot reload not working (any little change reloading the whole page always) so we need to stay on 13.4.5

Expected Behavior

Styles should be good all the time

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[MKraust]

We have exact same issue on 13.4.18 (it works fine on 13.4.12) in one single case, not for every navigation. Hard navigating to 404 page, then soft navigating to other places seems to not load some (exactly some) of the CSS. We use CSS Modules.

In our project this bug reproduces only on hard navigation to dynamic segment that throws notFound().
Hard navigation to non-existent segment doesn't produce this bug. Soft navigation to 404 doesn't produce this bug either.

I can see these lines, containing needed CSS chunk in the response

3:HL["/_next/static/css/b08a2188dd1c88b2.css",{"as":"style"}]
...
1:["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","article","children",["slug","vimeo-video","d"],"children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$L7","$L8",null],"segment":"__PAGE__"},"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b08a2188dd1c88b2.css","precedence":"next"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/c226f2ee323fc792.css","precedence":"next"}]]}]

and after navigation I can see this script

<script>
  self.__next_f.push([1,"7:HL[\"/_next/static/css/66482b3fdfca70b9.css\",{\"as\":\"style\"}]\n8:HL[\"/_next/static/css/b08a2188dd1c88b2.css\",{\"as\":\"style\"}]\n9:HL[\"/_next/static/css/c226f2ee323fc792.css\",{\"as\":\"style\"}]\n"])
</script>
<!-- and some other big script that contains missing chunk which I think must insert <link rel="stylesheet"...> -->

But all the CSS in head is

<!-- The first one is from root app/layout.tsx -->
<link rel="stylesheet" href="/_next/static/css/1bf2443249b2433b.css" data-precedence="next">
<link rel="stylesheet" href="/_next/static/css/66482b3fdfca70b9.css" data-precedence="next">
<link rel="stylesheet" href="/_next/static/css/c226f2ee323fc792.css" data-precedence="next">

Note that b08a2188dd1c88b2.css is missing.

[MKraust]

@ssijak I've traced this bug to 13.4.14-canary.4. I want to make sure our issues have the same origin. Can you confirm that 13.4.14-canary.2 doesn't produce this bug with missing styles in your app while 13.4.14-canary-4 does? Note that 13.4.14-canary.3 is missing.

If not, I'll just open a new issue :)

[Enngage]

We are encountering this issue as well. It happens intermittently - sometimes the module styles load, sometimes they do not. Also started happening after upgrading to 13.4.19 (we went from 13.4.12)

[hazzo]

I have the same issue, in all nextjs versions... I'm starting to suspect that this might be a vanilla-extract issue. What version are you using?

[hazzo]

Definitely vanilla-extract issue vanilla-extract-css/vanilla-extract#1152

[ssijak]

@hazzo It is NextJS issue in newer versions, any styling solution that does not use one big CSS file which is imported at the top level suffer from this, which is I would wager large percentage of projects

[hazzo]

@hazzo It is NextJS issue in newer versions, any styling solution that does not use one big CSS file which is imported at the top level suffer from this, which is I would wager large percentage of projects

But since which version? I tested with 13.3.4 and it still was not working...

[6mint]

Can confirm the issue for 14.1.0 with App Router.
Enforcing the the css output to a single chunk as a band-aid solution is working:

// next.config.js

const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");

const withVanillaExtract = createVanillaExtractPlugin();

const nextConfig = {
  webpack(config, { nextRuntime }) {
    if (!nextRuntime) {
      config.optimization.splitChunks.cacheGroups = {
        ...config.optimization.splitChunks.cacheGroups,
        styles: {
          name: "styles",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      };
    }
    return config;
  },
};

module.exports = withVanillaExtract(nextConfig);

[amar1795]

Can confirm the issue for 14.1.0 with App Router. Enforcing the the css output to a single chunk as a band-aid solution is working:

// next.config.js

const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");

const withVanillaExtract = createVanillaExtractPlugin();

const nextConfig = {
  webpack(config, { nextRuntime }) {
    if (!nextRuntime) {
      config.optimization.splitChunks.cacheGroups = {
        ...config.optimization.splitChunks.cacheGroups,
        styles: {
          name: "styles",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      };
    }
    return config;
  },
};

module.exports = withVanillaExtract(nextConfig);

I have applied this but i am still facing the issue , on hard reload the styling works fine but on navigation the style breaks . I am on nextjs 14.2.3

[6mint]

Are you using parallel routes? Next has a css loading issue for client navigation when using parallel routes. You could try updating to 14.3.0-canary.48 and see if the problem persists.

[amar1795]

no, i just switched to tailwind instead and everything works fine . it's just the external css files are not working properly .
Sure will try to update and see , Thanks .

[RisingGeek]

 webpack(config, { nextRuntime }) {
    if (!nextRuntime) {
      config.optimization.splitChunks.cacheGroups = {
        ...config.optimization.splitChunks.cacheGroups,
        styles: {
          name: "styles",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      };
    }
    return config;
  },

this works. I'm using pages router with Nextjs 14.2.4
But loading css in a single chunk is not a good idea

[amar1795]

 webpack(config, { nextRuntime }) {
    if (!nextRuntime) {
      config.optimization.splitChunks.cacheGroups = {
        ...config.optimization.splitChunks.cacheGroups,
        styles: {
          name: "styles",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      };
    }
    return config;
  },

this works. I'm using pages router with Nextjs 14.2.4 But loading css in a single chunk is not a good idea

thanks just figured out the fix, it was my mistake all working good now

[colehart]

thanks just figured out the fix, it was my mistake all working good now

What was your fix @amar1795 ?

[amar1795]

thanks just figured out the fix, it was my mistake all working good now

What was your fix @amar1795 ?

I am not sure but I guess I was loading CSS in a single Chunk hence the issue was happening .

this happened to fix it :

webpack(config, { nextRuntime }) {
if (!nextRuntime) {
config.optimization.splitChunks.cacheGroups = {
...config.optimization.splitChunks.cacheGroups,
styles: {
name: "styles",
type: "css/mini-extract",
chunks: "all",
enforce: true,
},
};
}
return config;
},