Next.js 13 support for vanilla extract

[calebmer]

Next.js 13 was announced with some exciting new features! https://nextjs.org/blog/next-13

Namely for vanilla extract:

1. React server components
2. Turbopack (Rust based webpack replacement)

For 1 CSS loading works pretty differently with react server components and requires bundler integration. Has vanilla extract been tested with server components? (I might test this in a couple weeks.)

For 2 I assume that means vanilla extract will need a new turbopack plugin?

[Dremora]

Besides server components, it seems that vanilla-extract currently doesn't work in client components with the app directory enabled in dev mode.

getGlobalCssLoader now expects ctx.hasAppDir to be defined, which should be straightforward enough to get.

[adamaho]

Seems to be failing on this line here: https://github.com/vercel/next.js/blob/canary/packages/next/server/app-render.tsx#L544. Just doing some random investigations right now in local node_modules. Haven't gotten very far as of yet.

[chriskrogh]

there seems to be some progress being made here #929 with a patch though i'm not sure if the team is actively working on official support yet

[oallouch]

Too bad that the Turbopack doc ( see https://turbo.build/pack/docs/comparisons/turbopack-vs-webpack ) states that :

"In its alpha state, Turbopack cannot currently be configured with plugins. In the future, we plan to make Turbopack just as extensible as Webpack - though likely with an altered API."

[madjam002]

vanilla-extract could still support Next 13 Server Components using Webpack for now

[jere-co]

For anyone too inpatient to wait, I've had good success using the Remix approach: https://github.com/markdalgleish/remix-vanilla-extract-prototype

Note the tradeoffs, but future migration should be rather painless.

[chriskrogh]

it seems like remix now has first class support for vanilla extract remix-run/remix#5040

[arthurpeixotomelo]

I'd post a comment in another discussion like this one, because i would like to use VE in Next 13, so after some search i've summarize this to someone with know how (wish i could do it, but i barely know how to use the libraries i need, let alone create a solution for some) enough to pull a PR or something.