Unable to render when using with NextJS v13 & React Server Components

[nick-kang]

Describe the bug

App does not render when I import a .css.ts file in a React Server Component. See component in repro repo.

Workaround is to convert the .css.ts to a default export and use swc-plugin-vanilla-extract instead of @vanilla-extract/next-plugin

// page.css.ts before
export const container = style({
  background: 'blue'
})

// page.css.ts workaround
const container = style({
  background: 'blue'
})

export default {
  container
}

Reproduction

https://github.com/nick-kang/vanilla-extract-repro-001

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 29.65 GB / 46.75 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.7.0 - /run/user/1000/fnm_multishells/553958_1669586582142/bin/node
    Yarn: 3.2.2 - /run/user/1000/fnm_multishells/553958_1669586582142/bin/yarn
    npm: 8.15.0 - /run/user/1000/fnm_multishells/553958_1669586582142/bin/npm
    Watchman: 2022.07.04.00 - /home/linuxbrew/.linuxbrew/bin/watchman
  Browsers:
    Chrome: 107.0.5304.121
    Firefox: 107.0
  npmPackages:
    @vanilla-extract/css: ^1.9.2 => 1.9.2 
    @vanilla-extract/next-plugin: ^2.1.1 => 2.1.1 
    @vanilla-extract/webpack-plugin: ^2.2.0 => 2.2.0

Used Package Manager

pnpm

Logs

TypeError: Cannot read properties of undefined (reading 'chunks')
    at getCssInlinedLinkTags (/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:362:49)
    at createComponentTree (/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:630:52)
    at /node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:753:62
    at Array.map (<anonymous>)
    at createComponentTree (/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:717:84)
    at /node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:753:62
    at Array.map (<anonymous>)
    at createComponentTree (/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:717:84)
    at /node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:753:62
    at Array.map (<anonymous>)
    at createComponentTree (/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:717:84)
    at /node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:753:62
    at Array.map (<anonymous>)
    at createComponentTree (/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:717:84)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:753:56
    at async Promise.all (index 0)
    at async createComponentTree (/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:717:38)
    at async /node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/app-render.js:993:51

### Validations

- [X] Check that there isn't [already an issue](https://github.com/vanilla-extract-css/vanilla-extract/issues) that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[audifaxdev]

@nick-kang I've tried your code and the suggested workaround, but I could not get the blue background style to apply.

I expect the background of the container to be blue, but the class style is missing and I get a 404 on http://localhost:3000/_next/app/page:app/page

[hamlim]

I think that the linked swc plugin only emulates the previous babel plugin / test transform and doesn't actually create the css resource.

[lilingxi01]

Is maintainers of this library planning to support Next.js 13 (appDir) and React Server Component?

[nick-kang]

@audifaxdev Did you also change the import from import * as styles from './page.css' to import styles from './page.css'?

[mdecrocemovson]

@nick-kang what does your next.config.js look like with this workaround? Trying to use the same one.

[pr-o]

I'm having the same problem.

gonna sit here and wait on Next.js 13 (+ appDir) supports 👀

[bizarre]

Alternative workaround: two small patches for NextJS + VE NextJS plugin: https://gist.github.com/bizarre/825cab8224c28e93ff1a3933642f9271 (use with patch-package).

Only caveat I've found so far is that globalStyle doesn't seem to actually be global for server components, otherwise works pretty well.

[graup]

@bizarre I tested your patch and it works for me as well. I don't see any problem with globalStyle.

Do you want to submit a PR for VE?

Not sure what we should do about the mod.default part in nextjs' code, maybe submit a PR there too? That seems to make their code more robust, so that should be a welcome change. However, not sure about adding css.ts to that regex. Maybe we need to find a way to fix that on our end.

(Tagging @shuding hoping they might be able to help us)

[madjam002]

@bizarre This patch works great for me, although I've noticed some strange behaviour where if I have a .css.ts file that uses vanilla-extract/sprinkles and I have lots of properties passed to defineProperties, no CSS is output when doing a next build even though the class names appear in the markup. next dev works fine though.

If I reduce the number of properties passed to defineProperties, it works fine. I'm guessing there is some kind of limit I'm hitting with how many CSS classes are being generated. Planning to dig a little deeper to find out what this could be.

EDIT: It looks like an issue triggered by Webpack chunk splitting if the CSS chunks are large and the way that NextJS 13 flight-manifest-plugin picks up CSS chunks.

EDIT 2: I fixed it with this extremely horrible hack, this will probably break other stuff and affect ordering of CSS imports but it seems to work well for me https://gist.github.com/madjam002/55c7d60b247c12e30b65a395e29d5871

[chriskrogh]

Any updates here? Looking forward to using VE with RSC 😄

[NicoZweifel]

Using styled mdx pages as ServerComponents and @storybook/nextjs and everything seems to be fine with dev and storybook but am experiencing some issues with build , globalStyle and createGlobalTheme like mentioned by others previously.

Currently on [email protected] using an adjusted version of @bizarre 's patch with patch-package and appDir: true in next.config.js.

  experimental: {
    appDir: true,
  },

The issue of globalStyle and createGlobalTheme not actually beeing global for server components still persists.

@madjam002 Observing the same behaviour still with large chunks from sprinkles. Splitting up the property definitions and sprinkles solved it, except for the color options which seem to be too many classes generated - no matter which way I split it.

@graup There are some changes in app.render.js and checking for mod.default does not do anything for me anymore since it seems to be always defined. I was thinking about submitting a PR to VE, but appDir won't work without the regex fix in next and it will crash with chunks undefined or sth similar like in OP's post.

As of now able to work fine in 'dev' and 'storybook', but would be happy to work on a PR or come back to this issue later when upgrading dependencies.

[bradcerasani]

Setting up Next.js 13 w/appDir and Vanilla Extract today and ran into this as well.

Updated the above patches based on current versions (Next.js 13.2.4, Vanilla Extract Next Plugin 2.1.1).

If you haven't used patch-package before:

1. Download Zip of gist
2. Rename unzipped folder to "patches", then move to project root
3. Add "postinstall": "patch-package" to the scripts key in package.json
4. npm i patch-package

[thiagop90]

Configurando o Next.js 13 w / appDir e Vanilla Extract hoje e se deparou com isso também.

Atualizado os patches acima com base nas versões atuais (Next.js 13.2.4, Vanilla Extract Next Plugin 2.1.1).

Se você ainda não usou o patch-package antes:

1. Baixar Zip of gist
2. Renomeie a pasta descompactada para "patches" e, em seguida, mova para a raiz do projeto
3. Adicionar à chave em "postinstall": "patch-package"``scripts``package.json
4. npm i patch-package

I downloaded the zip and did as you said but I never used the patch-package, how to use it to install the patches?

[christiankaindl]

@thiagop90: the steps that @bradcerasani provided are all you need. You should be able to see the patches being applied in the terminal after running npm install

You may need to update your package versions to match those from the patches

[christiankaindl]

@bradcerasani you patch works great when running locally, but when I build the app the styles don't get applied. Any idea why that could be? Did you run into the issue as well?

[trm217]

Does it still work with [email protected] for y'all?

[samkingco]

Also running into the same issues. Patches work fine and next dev works as expected, however when running next build and next start, none of my styles exist. The class names are there in the server component markup, just no link to the CSS file in the head, thus no style is applied. I can see the CSS files exist in .next/static/css and they reference class names in the server component, it's just not being linked to in the layout code.

[juice49]

@adri1wald Ah, I'm sorry. I should also clarify that I'm using macOS. Based on reports from other folks, it seems like there could be an issue when running in Windows. If your example project code is available, I can see what happens when I try to build it.

[adri1wald]

I run macOS too and this also failed in the vercel cloud

[juice49]

I just tested a Vercel build, and everything seems to be working correctly for me.

[graup]

It seems there are a few different issues here (1. builds not outputting css on Windows, 2. not working without the experimental.appDir setting). Could someone open new issues for these? I have a hunch that both of those will require help from the Next.js side.

[adri1wald]

Here's a link to my repo. @juice49 Maybe you can see what is wrong?

[daformat]

There also seem to be a 3rd issue, unrelated to the platform (I'm on MacOS), with the css being output in the build, but not included in the page, this happens with sprinkles when there are too many output classes, yet I am unsure if this is sprinkles specific, or just that sprinkles tend to increase faster than the rest.

• Here's an example that fails
• Here's one that doesn't

The simultaneous usage of two different sets of sprinkles (defined separately in different .css.ts files) is the only difference, with the faulty outputted css going from 8kb to 16kb and not being included in the page anymore

• The reproduction repo
• Related commit (from working to not working): daformat/vanilla-extract-next-app-dir-mono@263819e

This feels similar to what madjam002 described

Happy to open a dedicated issue if needed (edit: someone did, see #1085)

[exneval]

Could someone open new issues for these? I have a hunch that both of those will require help from the Next.js side.

Done

[i-bsd]

I ran into some problems getting Vanilla Extract to work with Next.js version 13.4.1. It took me a little while to figure out, but Vanilla Extract will only work when experimental.appDir is set to true in next.config.js. Because I'm using a Next.js version in which the App Router is stable, I didn't have this option enabled. After I switched it on, Vanilla Extract started working!

This is because the hasAppDir check here relies on the experimental.appDir option being set.

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

const withVanillaExtract = createVanillaExtractPlugin()

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // The App Router is stable, but the Vanilla Extract Next Plugin
    // currently requires that `experimental.appDir` is `true`.
    //
    // https://github.com/vanilla-extract-css/vanilla-extract/issues/929#issuecomment-1538555608
    appDir: true,
  },
}

module.exports = withVanillaExtract(nextConfig)

@e2goon You're using the same Next.js version as me. Maybe this will fix the problem for you.

Thanks for this. Works with experimental appDir flag. Curious though why after many weeks there's still no vanilla-extract update to remove this requirement.

[graup]

We're waiting for feedback from the Next.js team. It's not clear how to fix this on the Vanill Extract end. vercel/next.js#49892

[i-bsd]

Also, the CSS not appearing in builds isn't just a Windows issue. Happening for me on Ubuntu also.

[thevisioner]

Tried several versions of Next.js 13.4.* on Windows 10. Class names are added, but no styles, even with "experimental.appDir: true". 😢

[jere-co]

@i-bsd & @thevisioner Try this for now #1085 (comment)

[thevisioner]

@jere-co Unfortunately, this solution doesn't work for me either.

[bgfernandes]

Having a similar issue, running ubuntu, on dev, everything works fine, when doing a production build, CSS file is not linked in the HTML.

I tried the solution @jere-co pointed it worked for me:

needs to disable splitChunks in the next.config.js:

const nextConfig = {
  experimental: {
    appDir: true,
  },
  webpack: config => {
    config.optimization.splitChunks = false;

    return config;
  },
};

[joshua7v]

I'm on the same boat with @thevisioner
with exact the same config @jere-co provides

const nextConfig = {
  experimental: {
    appDir: true,
  },
  webpack: config => {
    config.optimization.splitChunks = false;

    return config;
  },
};

It seems the issue is Windows only.
I can see classes are applied correctly, but no styles at all in both dev/production mode

I have to use page routes instead of app dir for now. old page routes does not have the issue.

[csi-lk]

issue is Windows only

Using above config does workaround for unix. Without it we're seeing this issue across the board

[thevisioner]

Unfortunately, due to the great lack of specificity, I've completely moved away from trying CSS-in-JS at the moment. For me personally, full compatibility with the React Server Component model is important and that's why I've gone back to the basics - using CSS Modules. It is also noticeable that throughout the ecosystem many of the solutions are going back to the basics/standards. I don't know if it will be the same with CSS, but in a sense, I myself am willing to accept this path.

[christiankaindl]

@thevisioner I am using it on mac and linux without problems--without using a custom next.config.js

[thevisioner]

@thevisioner I am using it on mac and linux without problems--without using a custom next.config.js

Yes, but vanilla-extract still doesn't generate stylesheets on Windows machine. I also can't judge full compatibility with the React Server Components, for that reason. 😞

[Dremora]

@thevisioner I don't see how CSS Modules solve the specificity issue. The loading order of CSS Modules is still handled by a bundler (e.g. Webpack).
To solve specificity issues with v-e, I recommend using layers API (which is a web standard). defineProperties from Sprinkles allows passing @layer where sprinkles are generated. This way, you can mix component-specific and shared (Sprinkles) styles without worrying about the order: Sprinkles will always have a lower specificity.

[thevisioner]

@Dremora I seem to have been vague. I don't mean the specificity of CSS, but rather the specifics (lack of clarity) in the context of the RSC (React Server Components) compatibility issues of various CSS-in-JS solutions. And for now, RSC compatibility is one of my self-imposed requirements.

[syfxlin]

I've recently been in the process of migrating my blog from Gatsby to Next.js, and I'm also experiencing problems with the Next.js RSC not outputting CSS on Windows. I found a solution at style9-webpack (SukkaW/style9-webpack#1) and made another Next.js plugin for vanilla-extract that works fine on Windows/Linux/macOS, if you're having a similar problem, you can try @syfxlin/next-plugin-vanilla-extract.

[EugenePeter]

I've recently been in the process of migrating my blog from Gatsby to Next.js, and I'm also experiencing problems with the Next.js RSC not outputting CSS on Windows. I found a solution at style9-webpack (SukkaW/style9-webpack#1) and made another Next.js plugin for vanilla-extract that works fine on Windows/Linux/macOS, if you're having a similar problem, you can try @syfxlin/next-plugin-vanilla-extract.

Using windows and can confirm that this worked

[askoufis]

Since the release of @syfxlin's patch, I'm hoping that the issues mentioned in this thread have been fixed. The windows-specific issue was being tracked in #1086, but I see that there have been some users reporting a similar issue on Ubuntu. If the issue is still occurring with the latest patch, please raise a separate issue instead of commenting on this one.

[thevisioner]

Long awaited fixes. 🙌 I can also confirm that it now works on a Windows system. Many thanks to the contributors! You're giving me a choice again. 😅