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

[GabrielZCode]

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

[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

[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

[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

[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