externals option in VanillaExtractPlugin is silently ignored — array is nested instead of spread into ExternalsPlugin #1719
-
|
When passing an To ReproduceConfigure the plugin with externals: const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
const withVanillaExtract = createVanillaExtractPlugin({
externals: ['react', 'react-dom', 'my-package'],
});Despite the configuration, the child compiler still attempts to bundle Expected behaviorPackages listed in Actual behaviorThe externals are silently ignored. The child compiler still tries to bundle the listed packages, causing crashes when those packages contain code that can't run in the child compiler's isolated environment (e.g. React components that reference Root CauseIn // Current (buggy) — externals array is nested as one element
new ExternalsPlugin('commonjs', [
'@vanilla-extract/css',
'@vanilla-extract/css/fileScope',
externals // ← should be ...externals
]).apply(childCompiler);
Proposed FixSpread the new ExternalsPlugin('commonjs', [
'@vanilla-extract/css',
'@vanilla-extract/css/fileScope',
...(Array.isArray(externals) ? externals : [externals].filter(Boolean))
]).apply(childCompiler);The same fix needs to be applied to all three dist variants:
Additional Finding:
|
| Package | Version |
|---|---|
@vanilla-extract/webpack-plugin |
2.3.25 |
@vanilla-extract/next-plugin |
2.4.17 |
next |
16.1.0 |
node |
22.22.0 |
Workaround
Until this is fixed, avoid importing from packages that include React code in .css.ts files. Import directly from a CSS-only sub-package instead:
// Instead of the barrel export (crashes child compiler)
import { tokens } from "my-package";
// Import from the theme/tokens-only sub-package
import { tokens } from "my-package-theme";Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
|
Thanks for raising this. This has been addressed in the latest versions of the next and webpack plugins. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @askoufis for a quick turnaround. Do you guys have a plan to rollout a new version for |
Beta Was this translation helpful? Give feedback.
-
|
Hi @askoufis, Environment:
What the What's still failing: Minimal reproduction:
Where
Key observation: This suggests the React Refresh transform is being applied to Suggested fix direction: Happy to provide additional details if helpful. Thanks for your continuous support! |
Beta Was this translation helpful? Give feedback.
Thanks for raising this. This has been addressed in the latest versions of the next and webpack plugins.