Troubleshooting Vanilla-Extract and SolidJS Component Library Build Errors with `add-function-serializer`

[thep0y]

Describe the bug

I am using SolidJS and vanilla-extract to write a component library. I created the project based on a template, and it can be packaged successfully. However, when importing this component library into another project, an error is reported:

error during build:
[vite-plugin-vanilla-extract] Invalid exports.

You can only export plain objects, arrays, strings, numbers and null/undefined.
file: E:/Develpment/fluent-vite/lib/components/button/Button.css.js

It seems that the issue arises because I used @vanilla-extract/recipes in Button.css.ts. Then, I referred to the official documentation add-function-serializer and created runtime.tsx, and modified the implementation of the Button component:

import { addFunctionSerializer } from "@vanilla-extract/css/functionSerializer";

import { buttonRecipe } from "./Button.css";
import type { ButtonProps } from "./Button.types";
import { runtimeButton } from "./runtime";

export function Button(props: ButtonProps) {
	const isIconOnly = () => !!props.icon && !props.children;
	const isDisabled = () => props.disabled || props.disabledFocusable;
	const size = () => props.size || "medium";

	const className = buttonRecipe({
		appearance: props.appearance,
		shape: props.shape,
		size: size(),
		iconOnly: isIconOnly(),
		disabled: isDisabled(),
		disabledFocusable: props.disabledFocusable,
	});

	const args = [className];

	const Component = runtimeButton(...args);

	addFunctionSerializer(Component, {
		importPath: "@fluentui/solid/lib/components/button/runtime",
		importName: "runtimeButton",
		args: [args],
	});

	return Component(props);
}

However, after packaging, the same error occurs when importing the component in another project.

The example project code is as follows:

App.tsx

import { Button } from "@fluentui/solid";

const App = () => {
	return (
		<>
			<Button>Hello World</Button>
		</>
	);
};

export default App;

index.tsx

/* @refresh reload */
import { render } from "solid-js/web";
import App from "./App.tsx";
import { ThemeProvider } from "@fluentui/solid";

const root = document.getElementById("root");

render(
	() => (
		<ThemeProvider>
			<App />
		</ThemeProvider>
	),
	root!,
);

The package.json of the example project:

{
  "name": "example",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vanilla-extract/recipes": "^0.5.5",
    "solid-icons": "^1.1.0",
    "solid-js": "^1.9.5"
  },
  "devDependencies": {
    "@vanilla-extract/vite-plugin": "^5.0.1",
    "typescript": "~5.7.2",
    "vite": "^6.2.0",
    "vite-plugin-solid": "^2.11.2"
  }
}

The error is as follows:

$ bun run build

$ tsc -b && vite build
vite v6.2.6 building for production...
transforming (1) src\index.tsx[Function: runtimeFn] {
  variants: [Function (anonymous)],
  classNames: { base: [Getter], variants: [Getter] }
}
✓ 13 modules transformed.
✗ Build failed in 286ms
error during build:
[vite-plugin-vanilla-extract] Invalid exports.

You can only export plain objects, arrays, strings, numbers and null/undefined.
file: E:/Develpment/fluent-vite/lib/components/button/Button.css.js
    at javascriptStringify.stringify.references (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\integration\dist\vanilla-extract-integration.cjs.prod.js:241:11)
    at E:\Develpment\fluent-vite\example\node_modules\javascript-stringify\dist\index.js:88:16
    at E:\Develpment\fluent-vite\example\node_modules\javascript-stringify\dist\index.js:54:20
    at onNext (E:\Develpment\fluent-vite\example\node_modules\javascript-stringify\dist\index.js:35:24)
    at Object.stringify (E:\Develpment\fluent-vite\example\node_modules\javascript-stringify\dist\index.js:65:20)
    at stringifyExports (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\integration\dist\vanilla-extract-integration.cjs.prod.js:199:30)
    at E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\integration\dist\vanilla-extract-integration.cjs.prod.js:294:30
    at Array.map (<anonymous>)
    at Object.serializeVanillaModule (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\integration\dist\vanilla-extract-integration.cjs.prod.js:293:49)
    at Object.processVanillaFile (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\compiler\dist\vanilla-extract-compiler.cjs.prod.js:356:29)
    at async Object.transform (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\vite-plugin\dist\vanilla-extract-vite-plugin.cjs.prod.js:158:13)
    at async transform (file:///E:/Develpment/fluent-vite/example/node_modules/rollup/dist/es/shared/node-entry.js:20906:16)
    at async ModuleLoader.addModuleSource (file:///E:/Develpment/fluent-vite/example/node_modules/rollup/dist/es/shared/node-entry.js:21119:36)
error: script "build" exited with code 1

I am not sure whether I misunderstood the usage of add-function-serializer, or if there is an error in the official documentation. Please help me investigate the cause. Thank you.

Reproduction

https://github.com/thep0y/vanilla-extract-lib

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 8845H w/ Radeon 780M Graphics
    Memory: 13.87 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/esbuild-plugin: ^2.3.15 => 2.3.15
    @vanilla-extract/rollup-plugin: ^1.3.14 => 1.3.14
    @vanilla-extract/vite-plugin: ^5.0.1 => 5.0.1
    vite: ^6.2.6 => 6.2.6

Used Package Manager

npm

Logs

$ tsc -b && vite build
vite v6.2.6 building for production...
transforming (1) src\index.tsx[Function: runtimeFn] {
  variants: [Function (anonymous)],
  classNames: { base: [Getter], variants: [Getter] }
}
✓ 12 modules transformed.
✗ Build failed in 274ms
error during build:
[vite-plugin-vanilla-extract] Invalid exports.

You can only export plain objects, arrays, strings, numbers and null/undefined.
file: E:/Develpment/fluent-vite/lib/components/button/Button.css.js
    at javascriptStringify.stringify.references (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\integration\dist\vanilla-extract-integration.cjs.prod.js:241:11)
    at E:\Develpment\fluent-vite\example\node_modules\javascript-stringify\dist\index.js:88:16
    at E:\Develpment\fluent-vite\example\node_modules\javascript-stringify\dist\index.js:54:20
    at onNext (E:\Develpment\fluent-vite\example\node_modules\javascript-stringify\dist\index.js:35:24)
    at Object.stringify (E:\Develpment\fluent-vite\example\node_modules\javascript-stringify\dist\index.js:65:20)
    at stringifyExports (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\integration\dist\vanilla-extract-integration.cjs.prod.js:199:30)
    at E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\integration\dist\vanilla-extract-integration.cjs.prod.js:294:30
    at Array.map (<anonymous>)
    at Object.serializeVanillaModule (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\integration\dist\vanilla-extract-integration.cjs.prod.js:293:49)
    at Object.processVanillaFile (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\compiler\dist\vanilla-extract-compiler.cjs.prod.js:356:29)
    at async Object.transform (E:\Develpment\fluent-vite\example\node_modules\@vanilla-extract\vite-plugin\dist\vanilla-extract-vite-plugin.cjs.prod.js:158:13)
    at async transform (file:///E:/Develpment/fluent-vite/example/node_modules/rollup/dist/es/shared/node-entry.js:20906:16)
    at async ModuleLoader.addModuleSource (file:///E:/Develpment/fluent-vite/example/node_modules/rollup/dist/es/shared/node-entry.js:21119:36)
error: script "build" exited with code 1

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.