Libraries shipping `vanilla.js` files break the build when app uses a vanilla-extract plugin as well.
#1,242 建立於 2023年11月20日
描述
Describe the bug
The build error
ERROR: Cannot import "node_modules/@ffriedl/rollup-ve-lib/dist/Button/Button.css.ts.vanilla.css" into a JavaScript file without an output path configured
happens during a build of an app when consuming a library built with the @vanilla-extract/rollup-plugin and the app itself using @vanilla-extract/css and a corresponding plugin e.g. @vanilla-extract/vite-plugin. The same issue was also observed when building an app using the @vanilla-extract/esbuild-plugin.
The library mentioned in the error can be found here: https://github.com/ffriedl89/rollup-ve-lib.
As far as i managed to figure out - the issue is that the css file filters from the integration package https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/integration/src/filters.ts also match the files in the library that were already processed with the rollup plugin and they get processed again.
The issue is not present when there are no .vanilla.js files present in the library or when vite has optimizeDeps enabled.
When optimizedDeps is enabled vite prebundles a dependency in the .vite/deps folder which eliminates the .vanilla.js files before the apps plugin processes the dependency. Therefore no further pass of vanilla-extract happens and everything works as expected.
Expected behavior:
A library built with @vanilla-extract/rollup-plugin works inside an app that also uses @vanilla-extract for it's styling.
I'd like to be able to use vanilla-extract end to end :)
Thx! Let me know if I can help with anything!
Reproduction
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.4.2 - /usr/local/bin/npm
pnpm: 8.10.0 - /usr/local/bin/pnpm
npmPackages:
@vanilla-extract/vite-plugin: ^3.9.2 => 3.9.2
vite: ^5.0.0 => 5.0.0
Used Package Manager
npm
Logs
error during build:
Error: Build failed with 1 error:
node_modules/@ffriedl/rollup-ve-lib/dist/Button/Button.css.js:5:13: ERROR: Cannot import "node_modules/@ffriedl/rollup-ve-lib/dist/Button/Button.css.ts.vanilla.css" into a JavaScript file without an output path configured
at failureErrorWithLog (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1626:15)
at eval (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1038:25)
at runOnEndCallbacks (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1461:45)
at buildResponseToResult (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1036:7)
at eval (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1065:16)
at responseCallbacks.<computed> (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:687:9)
at handleIncomingPacket (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:742:9)
at Socket.readFromStdout (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:663:7)
at EventEmitter.emit (node:events:42:9202)
at addChunk (node:internal/streams/readable:105:4109)
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.