[Bug?]: @vanilla-extract/vite-plugin causes errors when used with SolidStart

[deminearchiver]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Vercel shows the following error page:

If you open Runtime logs of your deployment, you will see an error similiar to the following (but with different line numbers probably):

Unhandled Rejection: TypeError: Cannot read properties of undefined (reading 'file')
    at Object.get (file:///var/task/chunks/runtime.mjs:5602:33)
    at file:///var/task/chunks/runtime.mjs:6385:32
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Node.js process exited with exit status: 128. The logs above can help with debugging the issue.

Here is a peek into .vercel/output/functions/__nitro.func/chunks/runtime.mjs

/* ... */
output: {
  path: joinURL(
    app.config.server.baseURL ?? "",
    router.base,
    bundlerManifest[id].file,
    //                  ^^^^
    // at Object.get (runtime.mjs:5602:33)
  ),
},
/* ... */

Expected behavior 🤔

The page should display fine with styling added by Vanilla Extract.

Steps to reproduce 🕹

You can also see more detailed and easier reproduction steps in the reproduction repository.

Steps:

1. Initialize a fresh Solid Start project
2. Add @vanilla-extract/vite-plugin to Vite plugins
3. Create a .css.ts file (may even be empty) and import it somewhere
4. Deploy with Vercel CLI
5. Load the deployment preview in the browser

Context 🔦

I am trying to build a website with Solid Start and Vanilla Extract, and host it on Vercel. I have tried other cloud hosting providers, some of them also have problems with Solid Start + Vanilla Extract, but the errors are very different between the providers. I have chosen to report Vercel specifically because it seems to be the Nitro provider with the best support (not sure really). Also reproducing this issue for different providers would be a pain (each one has its own CLI, account, dashboard, etc.).

Also I am reporting this issue here and not to Vanilla Extract or Vercel is because Vanilla Extract works fine with plain SolidJS, or with other frameworks like NextJS.

Your environment 🌎

System:
  OS: Windows 11 Pro 24H2 build 26100.1742 (release preview)
Binaries:
  Node: 20.15.1
  Yarn: v4.5.0
  npm: 10.8.1
npm dependencies:
  @solidjs/meta: ^0.29.4
  @solidjs/router ^0.14.7
  @solidjs/start: ^1.0.8
  @vanilla-extract/css: ^1.15.5
  @vanilla-extract/dynamic: ^2.1.2
  @vanilla-extract/recipes: ^0.5.5
  solid-js: ^1.9.1
  vinxi: ^0.4.3
  @vanilla-extract/vite-plugin: ^4.0.15
  lightningcss: ^1.27.0
  vercel: ^37.6.0

[riccardoperra]

Did you manage to solve this? I noticed I have the same error with the generic node output.

[deminearchiver]

No, I have no clue why it is happening

[mdynnl]

This also happens locally so please update the title accordingly. The problem seems to be @vanilla-extract/vite-plugin is using up its own vite instance with config provided by vinxi routers and messing up the builds.

Excluding the vite plugins including vinxi's here made the build working again. As a temporary solution, try pinning @vanilla-extract/[email protected]

Something similar also happened here