Unable to use Vanilla-Extract with Astro v5.0.0-beta.7

ancashoria commented 2 weeks ago

Astro Info

Astro                    v5.0.0-beta.7
Node                     v20.10.0
System                   macOS (arm64)
Package Manager          yarn
Output                   static
Adapter                  none
Integrations             @astrojs/react

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

No response

Describe the Bug

Error when using Vanilla Extract based on their guides here

vite:load 0.31ms [fs] /src/components/StyledHeading/StyledHeading.astro +5ms
  vite:resolve 0.20ms ./styles.css -> /Users/horiamiron/Downloads/astro-5/src/components/StyledHeading/styles.css.ts +21ms
  vite:resolve 0.05ms /src/components/StyledHeading/styles.css.ts -> /Users/horiamiron/Downloads/astro-5/src/components/StyledHeading/styles.css.ts +0ms
  vite:import-analysis 0.52ms [2 imports rewritten] src/components/StyledHeading/StyledHeading.astro +5ms
  vite:transform 2.72ms /src/components/StyledHeading/StyledHeading.astro +5ms
  vite:load 0.46ms [fs] /src/components/StyledHeading/styles.css.ts +4ms
  vite:load 0.56ms [fs] src/components/StyledHeading/styles.css.ts +0ms
  astro:vite Error when evaluating SSR module /Users/horiamiron/Downloads/astro-5/src/pages/index.astro:
  astro:vite |- TypeError: Cannot read properties of undefined (reading 'name')
  astro:vite     at TransformPluginContext.transform (file:///Users/horiamiron/Downloads/astro-5/node_modules/astro/dist/vite-plugin-astro/index.js:151:30)
  astro:vite     at PluginContainer.transform (file:///Users/horiamiron/Downloads/astro-5/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49097:19)
  astro:vite     at loadAndTransform (file:///Users/horiamiron/Downloads/astro-5/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:51929:49)
  astro:vite     at async ViteNodeServer._transformRequest (file:///Users/horiamiron/Downloads/astro-5/node_modules/vite-node/dist/server.mjs:430:16)
  astro:vite     at async ViteNodeServer._fetchModule (file:///Users/horiamiron/Downloads/astro-5/node_modules/vite-node/dist/server.mjs:391:17)
  astro:vite     at async ViteNodeRunnerWithContext.directRequest (file:///Users/horiamiron/Downloads/astro-5/node_modules/vite-node/dist/client.mjs:250:46)
  astro:vite     at async ViteNodeRunnerWithContext.cachedRequest (file:///Users/horiamiron/Downloads/astro-5/node_modules/vite-node/dist/client.mjs:189:14)
  astro:vite     at async ViteNodeRunnerWithContext.executeFile (file:///Users/horiamiron/Downloads/astro-5/node_modules/vite-node/dist/client.mjs:161:12)
  astro:vite     at async /Users/horiamiron/Downloads/astro-5/node_modules/@vanilla-extract/integration/dist/vanilla-extract-integration.cjs.dev.js:807:29
  astro:vite     at async queueFn (/Users/horiamiron/Downloads/astro-5/node_modules/@vanilla-extract/integration/dist/vanilla-extract-integration.cjs.dev.js:538:24)

What's the expected result?

I was expecting my styles.css.ts file to be compiled by vanilla-extract and attached to my component

Link to Minimal Reproducible Example

.

Participation

[ ] I am willing to submit a pull request for this issue.

apatel369 commented 2 weeks ago

@ancashoria Please add a link to reproduction.

StevenDepa commented 2 weeks ago

I reproduced the problem locally. It breaks on this line https://github.com/withastro/astro/blob/d63d87dcaea85e84acb26b70cbd650d6e1eea6df/packages/astro/src/vite-plugin-astro/index.ts#L207 Because this.environment is new in vite v6 beta https://main.vitejs.dev/changes/this-environment-in-hooks used by astro v5 beta. The cause is that Vanilla-Extract is not (yet) compatible with vite v6 (and transitively, with astro v5). It basically installs vite v5 and that breaks because Astro tries to use it with the new api. In the meantime adding this to the package.json (and running npm install) fixed the problem:

"overrides": {
    "@vanilla-extract/vite-plugin": {
      "vite": "6.0.0-beta.6"
    }
  }

apatel369 commented 2 weeks ago

I reproduced the problem locally. It breaks on this line https://github.com/withastro/astro/blob/d63d87dcaea85e84acb26b70cbd650d6e1eea6df/packages/astro/src/vite-plugin-astro/index.ts#L207

Because this.environment is new in vite v6 beta https://main.vitejs.dev/changes/this-environment-in-hooks used by astro v5 beta.

The cause is that Vanilla-Extract is not (yet) compatible with vite v6 (and transitively, with astro v5). It basically installs vite v5 and that breaks because Astro tries to use it with the new api.

In the meantime adding this to the package.json (and running npm install) fixed the problem:
"overrides": {

    "@vanilla-extract/vite-plugin": {

      "vite": "6.0.0-beta.6"

    }

  }

@StevenDepa Since this is a Vite issue, can you please create an issue in Vite repository?

ancashoria commented 2 weeks ago

Thanks for the info. I'll just wait for v6 to drop.

withastro / astro