search

vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript
https://vanilla-extract.style
MIT License
9.6k stars 293 forks source link

Using snowpack + preact throws `Script error` #225

Closed jssee closed 3 years ago

jssee commented 3 years ago

Describe the bug

I bootstrapped an app with create-snowpack-app using the preact-typescript template. whenever I try to use the style function, I get this weird error:

Unhandled Runtime Error
Script error.

Source:
no source file

when I check the browser console, this is whats there SyntaxError: Importing binding name 'parse' is not found.

not sure at what level this is happening, whether its a preact thing or what, not sure how that would change things though. I have the snowpack plugin installed.

Link to reproduction

demo repo

I made this demo repo which is a 1:1 to what I have, steps to see error after pulling down the repo:

$ yarn install
$ yarn start

its a mono repo, but if you want you can cd packages/client then run those steps above so that its identical to a standalone repo.

System Info

 System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 2.19 GB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 16.4.2 - ~/.asdf/installs/nodejs/16.4.2/bin/node
    Yarn: 1.22.4 - ~/.asdf/shims/yarn
    npm: 7.18.1 - ~/.asdf/installs/nodejs/16.4.2/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox Developer Edition: 90.0
    Safari: 14.1.1
    Safari Technology Preview: 15.0
mattcompiles commented 3 years ago

Not sure why the error messages are so unhelpful however I can see you're calling style outside of a .css.ts file. All @vanilla-extract/css code must be called within .css.ts files.