Component Library with Vanilla Extract for Next.js causing issues

[marco910]

Hi everyone,

I created a component library with @vanilla-extract/css and React. Now I want to use this in a Next.js app and getting the error:

Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started

I've configured Next.js to work with Vanilla-Extract as described on the website. When I use a Vanilla-Extract CSS file directly inside the Next.js app, it works. But when I try to use my components from the component library, I'm getting this error.

How do I have to integrate Vanilla-Extract into the component library? Currently, it's integrated as peerDependencies and devDependencies.

Any ideas? Thanks in advance for your help!

[francois-germain-partner-alltricks]

I did a poc some weeks ago which did what you are doing in a monorepo. I used the next-transpile-modules library and it worked fine.

[marco910]

@francois-germain-partner-alltricks How would the next.config.js look like when using this?

[francois-germain-partner-alltricks]

Something like that:

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

const withVanillaExtract = createVanillaExtractPlugin();
const withTranspileModules = createTranspileModulesPlugin(["@poc/shared"]);

/** @type {import('next').NextConfig} */
module.exports = withTranspileModules(withVanillaExtract({
    reactStrictMode: true,
    swcMinify: true,
}));

In this example @poc/shared was the uncompiled package I wanted to use.

[marco910]

@francois-germain-partner-alltricks That works already, thanks!

What do you mean with "uncomplied" in @poc/shared?
Currently, I'm running a build before pushing the library I want to use in Nex.tjs to NPM. Is that correct, or do I have to push the source files form /src?

[francois-germain-partner-alltricks]

I thought you didn't build the library cause if you do you shouldn't get vanilla-extract related error. Or at least I don't see why it happens.

Normally by building your lib, the resulting js should only contains classNames as string (or runtime code that you can use outside of .css.ts files) and all your css should already be in plain css files (that you might have to include manually).

So now I don't see why you get the error. I don't encourage you to push the source though. sorry.