Javascript NextJS setup for Vanilla Extract

[mikematos84]

Question

Is it possible to get vanilla extract working in a NextJS project but under Javascript instead of Typescript? It's a fairly large codebase and would be a pain to move over to Typescript.

[askoufis]

TypeScript isn't a requirement to use Vanilla Extract. It should work fine in a JavaScript project, with the only difference being that you'd author your styles inside .css.js files instead of .css.ts files.

[mikematos84]

Yea I did that, but keep getting the following. It's a brand new NextJS project I started for testing purpose

and that is with the stock configuration show on the vanilla-extract website for next

[mikematos84]

Okay so for anyone else tackling this, I resolved my own issue. It turns out the --turbopack flag is on by default in npm run dev and my hunch is since turbopack is still not fully featured even though it was released for primetime, it lacks some support for things like vanilla extract.

All that to say, if anyone was facing the same issues as I was, just remove --turbopack from the dev script or turned off with some feature flag.

[askoufis]

Ah right, I wasn't sure if Next.js defaults to turbopack now, but it seems like it does. Unfortunately turbopack does not support Vanilla Extract, and AFAIK there is currently no way to create a plugin with turbopack. We have an issue tracking this: #1367.