solid-start
solid-start copied to clipboard
[Bug?]: @vanilla-extract/vite-plugin causes errors when used with SolidStart
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:
- Initialize a fresh Solid Start project
- Add
@vanilla-extract/vite-plugin
to Vite plugins - Create a
.css.ts
file (may even be empty) and import it somewhere - Deploy with Vercel CLI
- 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