vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript

Home Page:https://vanilla-extract.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Errors running the Remix example on Windows OS

ryanwoodcox opened this issue · comments

Describe the bug

Running the Remix example on the Windows OS returns the error: [vite] Internal server error: No CSS for file: /app/components/HelloWorld.css.ts

  1. Install the latest remix, vanilla-extract and vite dependencies into the Remix example
    npm i @remix-run/node@latest @remix-run/react@latest @remix-run/serve@latest @vanilla-extract/css@latest
    npm i -D @remix-run/dev@latest @vanilla-extract/vite-plugin vite@latest

  2. Install the missing lightningcss dev dependency for the Remix example:
    npm i -D lightningcss

  3. Run the example npm run dev

  4. Recieve the error: [vite] Internal server error: No CSS for file: /app/components/HelloWorld.css.ts

  5. A workaround to run this example on Windows OS is to downgrade the @vanilla-extract/vite-plugin package to version 3.9.5
    npm i -D @vanilla-extract/vite-plugin@3.9.5

  6. The example works on Mac OS without having to downgrade the @vanilla-extract/vite-plugin package to version 3.9.5

Final package.json:

{
  "name": "vanilla-extract-example-remix",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "remix vite:dev",
    "build": "remix vite:build",
    "start": "remix-serve ./build/server/index.js"
  },
  "dependencies": {
    "@remix-run/node": "^2.8.0",
    "@remix-run/react": "^2.8.0",
    "@remix-run/serve": "^2.8.0",
    "@vanilla-extract/css": "^1.14.1",
    "isbot": "^4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.8.0",
    "@types/react": "^18.2.55",
    "@vanilla-extract/vite-plugin": "^4.0.4",
    "lightningcss": "^1.24.0",
    "vite": "^5.0.11"
  }
}

Reproduction

Run the Remix example locally on Windows OS (see description)

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: Intel i9-13900k
    Memory: 64 GB
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Brave: 1.63.165 Chromium (122.0.6261.94)

Used Package Manager

npm

Logs

No response

Validations

Initial question/conversation for reference:
#1338

After a very brief investigation, I can confirm that the issue is only present on Windows.
Compared to Linux, the exact same file is being loaded, namely /app/components/HelloWorld.css.ts, yet there is no CSS found on Windows.