Comments (7)
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.
from vanilla-extract.
Of course, I'll work on that, and get back to you in few days, sorry for the delay if that's a problem
from vanilla-extract.
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.
from vanilla-extract.
fine man, thanks for you time
from vanilla-extract.
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.
from vanilla-extract.
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
from vanilla-extract.
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
from vanilla-extract.
Related Issues (20)
- [VITE] Libraries shipping vanilla extract css loaded out of order when using vite HOT 1
- Next.js: Styles not loading after navigation with mixed pages/app HOT 3
- Error when updating Next.js to 14.2.2 version while using lodash-es in a @vanilla-extract/css file HOT 2
- Doesn't work since v4 HOT 2
- vite plugin fails to resolve files when full path starts with `/app` (remix, docker)
- 4.x breaks vite pre-rendering HOT 1
- Multline strings + webpack + storybook gives syntax error HOT 5
- @vanilla-extract/[email protected] hangs Vite build HOT 5
- error TypeError [ERR_INVALID_URL]: Invalid URL HOT 1
- When using "globalStyle" with "layer" styles are missing from generated css output if the same selector is used multiple times HOT 1
- New vite compiler cache skips adapter registration HOT 7
- Vite plugin not detecting changes for .css.ts files imported by other .css.ts files HOT 3
- Error when using Vanilla Extract Design system in a Turborepo monorepo with Next.js14 HOT 6
- When using Vanilla-extract with Turborepo and Next.js 14, a ModuleParseError occurs. HOT 7
- composedClassLists order completely wrong on new Vite compiler HOT 1
- Inconsistencies in classname between server and client builds HOT 1
- Recipe's runtime functions do not accept `undefined` as valid values for variants at the type level (`exactOptionalPropertyTypes`) HOT 1
- TS error with @vanilla-extract/sprinkles and pnpm mono repo.
- "module is not defined" in cssesc HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vanilla-extract.