Can't get started with @vanilla-extract/css on a basic Hello World

kyplerdeloitte commented 1 year ago

Describe the bug

I am unable to assign the styles (background: red) I created with "import {styles} from vanilla-extract/css" to a simple div with the text "Hello World". I tried using different bundler integrations (vite, webpack, gatsby and bagel) but I keep getting this same error:

Anyone have any idea why? been stuck on this problem for almost a week and would love to get started.

Reproduction

https://github.com/kyplerdeloitte/hello-world

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
    Memory: 3.59 GB / 15.71 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\node_modules\.bin\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.67)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vanilla-extract/babel-plugin: ^1.2.0 => 1.2.0
    @vanilla-extract/css: ^1.12.0 => 1.12.0
    @vanilla-extract/vite-plugin: ^3.8.2 => 3.8.2
    @vanilla-extract/webpack-plugin: ^2.2.0 => 2.2.0

Used Package Manager

npm

Logs

No response

Validations

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

janbiasi commented 1 year ago

@kyplerdeloitte I think you should probably open the issue on the gatsby-plugin-vanilla-extract for the gatsby integration.

The other starter guides with official integration (tested Vite, Next & Webpack) work as expected, you may also want to check my recent repro repo for another issue which uses VE + Next.js: https://github.com/janbiasi/repro-next-vanilla-extract-jest

kyplerdeloitte commented 1 year ago

Hi Jan, did you test the other integrations on my repo? (The ones you mentioned didn't work on my repo, for me atleast, just wondering if you got it to work) Cause I'm willing to use any bundler integration as long as I can get it to work.

janbiasi commented 1 year ago

I did not check your linked repository as I'm not sure what your thoughts were when you setup the repository. I'd recommend to just follow the Getting Started - Bundler Integration guide on the website, that's the easiest way.

If you still don't get it to work hit me up and I can provide you an example repo 😃

vanilla-extract-css / vanilla-extract