Bad Error message when trying to use props values as Css values

[GabrielZCode]

Describe the bug

i know i can't use dynamic values as CSS values when using vanilla-extract , but the error message displayed is not helpful.

Description:

• When deploying a project to vercel i get the error message: "Error: The Edge Function "_qwik-city" is referencing unsupported modules: @qwik-city-plan.js: @vanilla-extract/css, @vanilla-extract/css/functionSerializer"

Cause:

A div component with class ={ style({ backgroundColor: props.value.toString() }) }

Suggested Error Message:

vanilla-extract-css -- dynamic values are not allowed in this context -- $file_name:$file_line

Reproduction

npm create qwik; npm run qwik add vanilla-extract-css; npm run qwik add vercel-adapter ; npm run build; npm run deploy

System Info

node --version: 20.3.0
openSuse tumbleweed linux x64 
linux-header: 6.8.1-1-default

- package version: 0.5.4 (vanilla-extract)
- framework: qwik: 1.5.4

Used Package Manager

npm

Logs

"Error: The Edge Function "_qwik-city" is referencing unsupported modules:
    - @qwik-city-plan.js: @vanilla-extract/css, @vanilla-extract/css/functionSerializer"

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[askoufis]

I don't think the referencing unsupported modules error comes from Vanilla Extract. That seems like a vercel thing. If you call style within a component at runtime, you'd probably see this error message, but it seems like vercel is throwing an error first.

[GabrielZCode]

OK good point, but the error message is still wrong, the configuration is right, the preview works so there's no at runtime (styles are already loaded to the component).

the problem relies with assingning variables to style(), witch the dev should not be doing.

I just think the error message is not helping the dev debugging the problem

[askoufis]

I can't reproduce your error with the reproduction you've provided. npm run qwik add vanilla-extract-css and npm run qwik add vercel-adapter don't seem to be valid commands. I think the integrations have different names.

Even when I did add the VE and vercel integrations correctly, I managed to deploy the app just fine. If you could create a repo with a minimal example of the error, or at least provide steps on reproducing the error in a simple qwik app, that would be appreciated.

[GabrielZCode]

Of course, I'll work on that, and get back to you in few days, sorry for the delay if that's a problem

[GabrielZCode]

npm create qwik@latest basic ./project; cd ./project ; npm install; npm run qwik add vercel-edge; (Press Enter); npm run qwik add styled-vanilla-extract; (Press Enter); npm install --legacy-peer-deps; mkdir src/components/buggy-component; touch src/components/buggy-component.tsx; echo 'import { component$ } from "@builder.io/qwik";
import { style } from "styled-vanilla-extract/qwik";

export default component$(() => {
const value = "anything"
return (
<div class={style({ backgroundColor: value})}/>
)
})' >> ./src/components/buggy-component/buggy-component.tsx;
npm run build; npm run build.server ; npm run deploy (Remember to configure your vercel project to do npm install with the --legacy-peer-deps option)

I think now its reproducible

[askoufis]

You can't use style in a runtime file, i.e. outside of a .css.ts file. Even though you're using styled-vanilla-extract/qwik, rather than @vanilla-extract/css directly, this is still the case (as shown in the package documentation).

I'm guessing that vercel is detecting some VE dependencies as runtime dependencies due to your use of style within buggy-component.tsx, resulting in that error.

Again, I don't think this is an issue that VE can help with, since your usage of the library is incorrect, and we can't easily influence how vercel chooses to surface this error.

[GabrielZCode]

fine man, thanks for you time