[Bug?]: @vanilla-extract/vite-plugin causes errors in console during build's transform

[midzdotdev]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using Vanilla Extract with the @vanilla-extract/vite-plugin as the first in the list of plugins, I receive lots of errors in the console.

It seems like I get one error per:

• reference to .css.ts file, or
• to a .ts file from a .css.ts file

Example with a longer stack trace:

Error: Failed to load url /_build/src/util/styling/transitionGroupStyles.ts (resolved id: /_build/src/util/styling/transitionGroupStyles.ts) in /Users/james/code/lexi/apps/web/src/components/organisms/Modal/Modal.css.ts. Does the file exist?
    at loadAndTransform (file:///Users/james/code/lexi/node_modules/.pnpm/vite@4.5.0_@types+node@20.10.5/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55015:21)
    at async getViteModuleNode (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:54:4)
    at async add_by_url (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:86:16)
    at async Promise.all (index 3)
    at async findDeps (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:112:2)
    at async add (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:81:4)
    at async add_by_url (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:89:4)
    at async Promise.all (index 7)
    at async findDeps (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:112:2)
    at async add (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:81:4)
    at async add_by_url (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:89:4)
    at async Promise.all (index 3)
    at async findDeps (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:112:2)
    at async add (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:81:4)
    at async add_by_url (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:89:4)
    at async Promise.all (index 7)
    at async findDeps (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:112:2)
    at async add (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:81:4)
    at async add_by_url (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:89:4)
    at async Promise.all (index 4)
    at async findDeps (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:112:2)
    at async findDependencies (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:127:5)
    at async findStylesInModuleGraph (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/collect-styles.js:156:23)
    at async viteAssets (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/dev-server-manifest.js:46:7)
    at async Object.assets (file:///Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/manifest/dev-server-manifest.js:217:16)
    at async Context.load (/Users/james/code/lexi/node_modules/.pnpm/vinxi@0.1.1_@types+node@20.10.5_preact@10.19.3/node_modules/vinxi/lib/plugins/manifest.js:59:13)
    at async Object.load (file:///Users/james/code/lexi/node_modules/.pnpm/vite@4.5.0_@types+node@20.10.5/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44323:32)
    at async loadAndTransform (file:///Users/james/code/lexi/node_modules/.pnpm/vite@4.5.0_@types+node@20.10.5/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:54954:24)
    at async viteTransformMiddleware (file:///Users/james/code/lexi/node_modules/.pnpm/vite@4.5.0_@types+node@20.10.5/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:64430:32) {
  code: 'ERR_LOAD_URL'
}

Example with shorter stack trace:

Error: Failed to load url /_build/src/styles/utils.css.ts (resolved id: /_build/src/styles/utils.css.ts) in /Users/james/code/lexi/apps/web/src/pages/Feed/components/FeedList/FeedList.css.ts. Does the file exist?
    at loadAndTransform (file:///Users/james/code/lexi/node_modules/.pnpm/vite@4.5.0_@types+node@20.10.5/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55015:21) {
  code: 'ERR_LOAD_URL'
}

Expected behavior 🤔

I would like it if the console didn't shout at me.

Steps to reproduce 🕹

Steps:

1. Init a fresh start project
2. Add vanilla extract as a dependency and add the plugin to site
3. Create an example style in a .css.ts file
4. Reference a .css.ts within a Solid component element for the class.
5. npm run dev or npm run build && npm run start
6. Load the page in the browser.

I'll try to make a minimal repro soon unless somebody beats me to it.

Context 🔦

I'm not sure what, if any, effect this has on the build. I have had the build working with the errors being logged (rn things are broken but that's a separate issue). Note the errors only seem to arise once a route is loaded in the browser.

Also worth noting, I've only had this issue since I migrated to the new Vinxi/Nitro version of Start.

I'm assuming it's because .css.ts files are transformed and bundled as CSS at build time. This may be more of a Vinxi issue, but I suspect it's more to do with the new defineConfig() Vite config wrapper from @solidjs/start/config. idk really.

Your environment 🌎

OS: macOS Sonoma 14.2.1
Browser: N/A
Node: 20.10.0
pnpm: 8.11.0

npm-deps: # basically everything is up-to-date
    "@solidjs/meta": "0.29.3",
    "@solidjs/router": "0.10.6",
    "@solidjs/start": "0.4.3",
    "@vanilla-extract/css": "1.14.0",
    "@vanilla-extract/css-utils": "0.1.3",
    "@vanilla-extract/dynamic": "2.1.0",
    "@vanilla-extract/vite-plugin": "3.9.3",
    "autoprefixer": "10.4.16",
    "database": "workspace:*",
    "dotenv": "16.3.1",
    "mux.js": "6.3.0",
    "postcss": "8.4.33",
    "rvfc-polyfill": "1.0.7",
    "shaka-player": "4.7.1",
    "shared-utils": "workspace:*",
    "solid-icons": "1.1.0",
    "solid-js": "1.8.8",
    "solid-transition-group": "0.2.3",
    "ts-essentials": "9.4.1",
    "typescript": "5.2.2",
    "vinxi": "0.1.1",
    "zod": "3.22.4"

[midzdotdev]

Related to nksaraf/vinxi#98

[nksaraf]

Can you provide a repro please. I wasn't able to trigger an error with @vanilla/extract. Seemed to work fine.

[emonadeo]

It only happens if inside a .css.ts you import from another .ts file.
Repro: https://github.com/emonadeo/repro_solid-start_1224

[rvlzzr]

Dev server won't even start with v4 of the Vanilla Extract Vite plugin.

Repro: https://github.com/rvlzzr/ssve

[ryansolid]

Looks like this is related to a downstream issue with Vanilla Extract on windows. vanilla-extract-css/vanilla-extract#1344

In any case this issue belongs upstream so probably not much value tracking it here.