solid-start icon indicating copy to clipboard operation
solid-start copied to clipboard

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

Open deminearchiver opened this issue 4 months ago • 3 comments

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:

vercel

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

deminearchiver avatar Sep 29 '24 18:09 deminearchiver