Cannot consume exported theme vars from a library that is built with rollup-plugin

Author: mihkeleidastCreated Feb 6, 2023Updated Apr 12, 2026

Labelsrolluphas-workaround

Describe the bug

Exported vars from a UI library that is build with @vanilla-extract/rollup-plugin cannot be consumed in consumer application without the application build breaking.

This affects vite, next, and webpack (and likely other app bundlers/plugins as well).

We are trying to pre-build our UI library with the rollup plugin, but this is not possible if we want to continue to consume the exported vars as well. I think some sort of double compilation is necessary, i.e. the vanilla-extract vite and webpack plugins should be able to consume libraries that are also build with some vanilla-extract plugin.

The workaround in https://github.com/vanilla-extract-css/vanilla-extract/discussions/774 works for the vite app, but I'm not sure that ignoring those nested imports is actually the best solution. Also, the same cannot be used for webpack/next examples.

Reproduction

https://github.com/graup/vanilla-extract-rollup-example/pull/3

System Info

bash

See the repro, the versions don't matter, happens on latest versions as well as older ones.

Used Package Manager

yarn

Logs

bash

// vite start
error during build:
Error: Build failed with 20 errors:
../../packages/ui/dist/foundation/Typography/styles.css.vanilla.js:1:7: ERROR: Cannot import "../../packages/ui/dist/foundation/Typography/styles.css.ts.vanilla.css" into a JavaScript file without an output path configured
../../packages/ui/dist/inputs/Button/Button.js:5:7: ERROR: Cannot import "../../packages/ui/dist/theme/theme.css.ts.vanilla.css" into a JavaScript file without an output path configured
../../packages/ui/dist/inputs/Button/styles.css.vanilla.js:1:7: ERROR: Cannot import "../../packages/ui/dist/theme/theme.css.ts.vanilla.css" into a JavaScript file without an output path configured
../../packages/ui/dist/inputs/Button/styles.css.vanilla.js:2:7: ERROR: Cannot import "../../packages/ui/dist/theme/sprinkles.css.ts.vanilla.css" into a JavaScript file without an output path configured
../../packages/ui/dist/inputs/Button/styles.css.vanilla.js:3:7: ERROR: Cannot import "../../packages/ui/dist/inputs/Button/styles.css.ts.vanilla.css" into a JavaScript file without an output path configured
...
    at failureErrorWithLog (/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/vite-plugin/node_modules/esbuild/lib/main.js:1604:15)
    at /home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/vite-plugin/node_modules/esbuild/lib/main.js:1056:28
    at runOnEndCallbacks (/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/vite-plugin/node_modules/esbuild/lib/main.js:1476:61)
    at buildResponseToResult (/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/vite-plugin/node_modules/esbuild/lib/main.js:1054:7)
    at /home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/vite-plugin/node_modules/esbuild/lib/main.js:1166:14
    at responseCallbacks.<computed> (/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/vite-plugin/node_modules/esbuild/lib/main.js:701:9)
    at handleIncomingPacket (/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/vite-plugin/node_modules/esbuild/lib/main.js:756:9)
    at Socket.readFromStdout (/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/vite-plugin/node_modules/esbuild/lib/main.js:677:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
// vite end

// next start, webpack fails similarly
info  - Creating an optimized production build ..<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js??ruleSet[1].rules[0].use[0]!/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[3].oneOf[3].use!/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/apps/example-nextjs/components/billing.css.ts': No serializer registered for CodeGenerationError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> CodeGenerationError
info  - Creating an optimized production build  
Failed to compile.

./components/billing.css.ts
CodeGenerationError: No template for dependency: CssDependency
    at /home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/next/dist/compiled/webpack/bundle5.js:25629:18
    at /home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/next/dist/compiled/webpack/bundle5.js:17657:6
    at /home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/next/dist/compiled/webpack/bundle5.js:17611:11
    at /home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/next/dist/compiled/webpack/bundle5.js:60793:9
    at /home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/next/dist/compiled/webpack/bundle5.js:17660:6
    at eval (eval at create (/home/mihkel/dev/mihkeleidast/vanilla-extract-rollup-example/node_modules/next/dist/compiled/webpack/bundle5.js:140346:10), <anonymous>:30:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
// next end

Validations

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

Source: vanilla-extract-css/vanilla-extract

View original on GitHub View discussion on GitHub