Astro combined with vanilla-extract fails loading cssesc when rendering a content collection item

[ymeine]

Astro Info

Astro                    v4.11.3
Node                     v22.1.0
System                   Windows (x64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             ymeine:pre-process-code
                         astro-icon
                         astro-expressive-code
                         @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/react
                         ymeine:qrcode

I copy pasted as is, but my package manager is not bun, it’s npm. I use bunx instead of npx which is slightly faster, but that’s all.

If this issue only occurs in one browser, which browser is a problem?

It is an issue occurring on server side in the DEV server, so not linked to any browser.

Describe the Bug

The issue occurs only when the Vite plugin for vanilla-extract is added to Astro’s configuration and since Astro 4.2.5:

import {defineConfig} from 'astro/config';

import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin';

export default defineConfig({
	vite: {
		plugins: [vanillaExtractPlugin()],
	},
});

When executing render() on a content collection item (I tried only in the context of loading an Astro page which fetches content and calls render), the following error occurs (file names and line numbers may vary):

ReferenceError: module is not defined
    at eval (cssesc.js:110:1)
    at instantiateModule (dep-BcXSligG.js:53408:11)

cssesc.js is not properly evaluated since it is using CommonJS and it is not translated.

Example of such code trigering the issue:

---
import {getCollection} from 'astro:content';

const collection = await getCollection('articles');
const {Content} = await articles[0].render(); // that call fails
---

<Content />

It occurs only once per item. Therefore, reloading the page, going elsewhere and coming back to it, or going to another page rendering the same item will not fail anymore for that item, until the DEV server is restarted.

It does not fail at build time.

What's the expected result?

Well, the issue not to occur.

To be honest, since it’s in combination with vanilla-extract, I hesitated between their project and Astro’s to file an issue. And as of now, I’m still not sure who would be the culprit. Yet, it started to happen only once Astro started using cssesc, like vanilla-extract already did. It’s also related to how dependencies are loaded, and the issue does not happen at build time, leading to think that Astro’s discrepancies between dev vs build is at fault, and dev configuration would not be appropriate for some dependencies.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/stackblitz-starters-1kbjbz

[FraserThompson]

I'm also experiencing this, but it doesn't seem to occur once per item for me. Reloading the page doesn't fix it.

As an extremely sloppy temporary workaround just so I could continue devving I went into node_modules/cssesc/cssesc.js and added a check for module around the export, like if (typeof module !== 'undefined') { module.exports = cssesc; }, which will obviously stop the module from working when imported as ESM, so is NOT a fix. But it stops the dev server from complaining so I can keep working.

But a proper fix would be very much appreciated.

edit: actually that fix didn't really turn out to be a fix. Downgrading to @vanilla-extract/vite-plugin 4.0.9 seems to resolve the issue though. The issue seems to have been introduced in 4.0.10

[bluwy]

I tried debugging this, and I found that the Vite error is happening inside Vanilla Extract's own Vite server, not ours, at https://github.com/vanilla-extract-css/vanilla-extract/blob/28df959c1d407c0ae03b8dc2d5363de60513d4ff/packages/integration/src/compiler.ts#L48. In our Vite setup, when a cssesc import is detected, Vite will externalize it by default so that it isn't processed by Vite (as it can't handle CJS). However, in Vanilla Extract's setup, it doesn't externalize cssesc, causing issues when loaded by Vite.

It's not clear to me why it works differently in Vanilla Extract's setup, but I'd suggest reporting this issue to https://github.com/vanilla-extract-css/vanilla-extract. Unfortunately I don't think there's anything else Astro could do here, so I'll close this, but thanks for reporting this issue (and for the great repro).