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

This issue should be resolved on next@13.3.1-canary.6 (thanks to @shuding on https://github.com/vercel/next.js/pull/48306)

Working example repo here

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

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.

If you haven’t used patch-package before

people still use that?

i thought everyone moved onto yarn 4 when they handed in their rotary dial phones?

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

While using the canary builds, I notice styles are coming through correctly, however our sprinkles are not. Classnames are being attached to the markup but the css is not there.

~This is a large application with a lot of sprinkles. While building the project or running in dev mode, I get quite a few serialization warnings due to the sprinkles as well.~

I consolidated our sprinkles to only what was necessary which removed all serialization warnings, however the sprinkles css is still not being applied in the production build.

I’m having the same problem.

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

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): https://github.com/daformat/vanilla-extract-next-app-dir-mono/commit/263819e1dfa3d381e20e0940fe67cce22493ff32

This feels similar to what madjam002 described

Happy to open a dedicated issue if needed (edit: someone did, see https://github.com/vanilla-extract-css/vanilla-extract/issues/1085)

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.

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.

@airtonix what a way to enrich the GitHub community, way to go! 👏🏼🙄

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.

I realized that it still doesn’t work for windows operating system and it has flaws, yesterday I tried it on linux operating system and it worked normally․ I will ask specialists to pay attention to this global problem. Thanks

We’re waiting for feedback from the Next.js team. It’s not clear how to fix this on the Vanill Extract end. https://github.com/vercel/next.js/discussions/49892

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’d like to know the status of this issue.

I can confirm the same problem:

When I run both https://github.com/SuttonJack/vanilla-extract-app-dir and my own project with a similar setup on my work Mac, everything works fine, but on my Win11 desktop in dev mode, classes are correctly generated, but CSS files are not attached. No errors are reported both in the browser and in the terminal running the dev server.

I will try to gather more details when I have time, as I know what I provided here isn’t much useful, I just wanted to confirm that @KhachGevorgyan94 isn’t alone.

Thanks @SuttonJack! Your example repo works great for me, both dev and build. Export also works if you remove export const runtime = 'experimental-edge' from page.tsx.

I’ll go ahead and close this issue. If anyone encounters any new problems, please open a new issue!

@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

@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)

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

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

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.

It exposes the class name correctly on Windows 11, but it doesn’t work properly because there is no CSS. I’m having the same issue.

• Next.js 13 / appDir - 13.4.1
• @vanilla-extract/css - 1.11.0
• @vanilla-extract/next-plugin - 2.1.2

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 next@13.1.3 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.

@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