Skip to content

vanilla-extract CSS Not Found After Building SolidJS Component Library #1572

@thep0y

Description

@thep0y

Describe the bug

I built a component library using SolidJS, Vite, and vanilla-extract. After building the component library, I encountered errors when importing components in the examples.

I saw the same error in this GitHub issue: #1302, but it seems the cause is different from my component library's case.

I'm new to vanilla-extract and unsure whether I'm writing the component library correctly or importing it the right way.

bun i
bun run build
cd example
bun run dev

Reproduction

https://github.com/thep0y/fluent

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 8845H w/ Radeon 780M Graphics
    Memory: 15.55 GB / 31.31 GB
  Binaries:
    Node: 20.17.0 - E:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - E:\Program Files\nodejs\npm.CMD
    bun: 1.2.0 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (132.0.2957.140)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @vanilla-extract/css: ^1.17.1 => 1.17.1
    vite: ^6.2.0 => 6.2.6

Used Package Manager

npm

Logs

18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/themes/var.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/themes/theme.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/button/Button.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/spinner/Spinner.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/label/Label.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/switch/Switch.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/badge/Badge.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/tooltip/Tooltip.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/input/Input.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/progress/Progress.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/slider/Slider.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/divider/Divider.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/card/Card/Card.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/card/CardFooter/CardFooter.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/card/CardPreview/CardPreview.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/card/CardHeader/CardHeader.css.ts
18:12:58 [vite] Internal server error: No CSS for file: E:/aaa/fluent-vite/lib/themes/var.css.ts
      at Object.getCssForFile (E:\aaa\fluent-vite\example\node_modules\@vanilla-extract\compiler\dist\vanilla-extract-compiler.cjs.dev.js:371:15)
      at LoadPluginContext.load (E:\aaa\fluent-vite\example\node_modules\@vanilla-extract\vite-plugin\dist\vanilla-extract-vite-plugin.cjs.dev.js:206:22)
      at EnvironmentPluginContainer.load (file:///E:/aaa/fluent-vite/example/node_modules/vite/dist/node/chunks/dep-Bid9ssRr.js:47665:17)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async loadAndTransform (file:///E:/aaa/fluent-vite/example/node_modules/vite/dist/node/chunks/dep-Bid9ssRr.js:41261:22)
      at async viteTransformMiddleware (file:///E:/aaa/fluent-vite/example/node_modules/vite/dist/node/chunks/dep-Bid9ssRr.js:42807:24)
18:12:58 [vite] Internal server error: No CSS for file: E:/aaa/fluent-vite/lib/themes/theme.css.ts
      at Object.getCssForFile (E:\aaa\fluent-vite\example\node_modules\@vanilla-extract\compiler\dist\vanilla-extract-compiler.cjs.dev.js:371:15)
      at LoadPluginContext.load (E:\aaa\fluent-vite\example\node_modules\@vanilla-extract\vite-plugin\dist\vanilla-extract-vite-plugin.cjs.dev.js:206:22)
      at EnvironmentPluginContainer.load (file:///E:/aaa/fluent-vite/example/node_modules/vite/dist/node/chunks/dep-Bid9ssRr.js:47665:17)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async loadAndTransform (file:///E:/aaa/fluent-vite/example/node_modules/vite/dist/node/chunks/dep-Bid9ssRr.js:41261:22)
      at async viteTransformMiddleware (file:///E:/aaa/fluent-vite/example/node_modules/vite/dist/node/chunks/dep-Bid9ssRr.js:42807:24)
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/toast/ToastContent/ToastContent.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/toast/ToastContainer/ToastContainer.css.ts
18:12:58 [vite] (client) Pre-transform error: No CSS for file: E:/aaa/fluent-vite/lib/components/toast/ToastIcon/ToastIcon.css.ts

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions