@vanilla-extract/webpack-plugin - document is not defined (Next.js 13+)

[Dessader]

Describe the bug

An application and package has been created in the monorepository that contains the definition of base tokens that are implemented using vanilla extract. Rollup and the corresponding plugin - @vanilla-extract/rollup-plugin, are used to build this package.

This package should be used in applications and other local libraries that will implement UI components.

After building the package and trying to import the created variables into the consumer application, I get an error:

Uncaught ModuleBuildError: Module build failed (from ../../node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: document is not defined

I've looked at other issues in the repository with similar cases, but the proposed solutions are mostly based on the fact that you have to create a separate entry point for exporting style-related entities to get something like this:

import { A } from "@repo/design-system";
import { B } from "@repo/design-system/tokens"; 

However, in this case, it's probably not relevant, since nothing other than that is exported from the package.

I may be wrong somewhere.

Reproduction

https://github.com/Dessader/vanilla-extract-style-issue

System Info

System:
    OS: macOS 13.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 100.88 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Safari: 16.3

Used Package Manager

yarn

Logs

No response

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Dessader]

Small update.

When importing a component from a package that uses VE and including variables in its own styles, they work correctly in the consumed application.

However, there is still a problem where using variables directly from the package in the styles of the application itself causes an error.

The reproducible example given in the issue is also updated to demonstrate this.

Component definition:

// Box.tsx
import React from "react";
import { root } from "./Box.css";

export const Box = () => <div className={root}>External box</div>;

// Box.css.ts
import { style } from "@vanilla-extract/css";
import { cssVars } from "../vars";

export const root = style({
  padding: cssVars.spacing["spacing-2x"],
  background: "lightcoral",
});

Consumption of component:

import { homePageRoot } from "@/styles/app.css";
import { Box } from "@example-monorepo/design-system";

const HomePage = () => {
  return (
    <div className={homePageRoot}>
      Next App
      <Box />
    </div>
  );
};

export default HomePage;

[dlineberger]

I had the same error when attempting to integrate Storybook into my vanilla-based monorepo. I was able to resolve it by adding the entryFileNames and assetFileNames entries to my rollup.config.js as in this example.

[Dessader]

I had the same error when attempting to integrate Storybook into my vanilla-based monorepo. I was able to resolve it by adding the entryFileNames and assetFileNames entries to my rollup.config.js as in this example.

Could you please provide a reproducible example?

[CinArb2]

I had a similar error, so basically when trying to import any css file into *.css.ts files throw errors in the new app directory. This css file is imported into your cssVars file when bundled.
This is what I did on my project link
Defining different entry points and adding this in the exports field on package.json solved my issue.
I mostly followed what is done here
I had to set treeshake on the entry point that handles globals selectors, then the css file can be imported directly into your layout page for example and the variable can be used in any css.ts file

[Dessader]

I had a similar error, so basically when trying to import any css file into *.css.ts files throw errors in the new app directory. This css file is imported into your cssVars file when bundled.
This is what I did on my project link
Defining different entry points and adding this in the exports field on package.json solved my issue.
I mostly followed what is done here
I had to set treeshake on the entry point that handles globals selectors, then the css file can be imported directly into your layout page for example and the variable can be used in any css.ts file

Thank you for taking the time to address this issue. I'm focused on another project right now, as soon as I have time to review your changes to my repository I'll look into it in more detail.