mergeConfig concatenates arrays instead of overriding build.lib.entry

[Leejha]

Project Structure

packages/theme/
├── dist/
├── src/
│ ├── foundations/
│ │ ├── css/
│ │ │ ├── color.css
│ │ │ ├── typography.css
│ │ │ └── index.ts
│ │ ├── js/
│ │ │ ├── colors.ts
│ │ │ ├── typography.ts
│ │ │ └── index.ts
│ │ └── index.ts # export * from "./js"; import "./css";
│ ├── style-dictionary/
│ └── index.ts # export * from "./foundations";
├── package.json
├── tsconfig.json
├── tsconfig.build.json
└── vite.config.mts

Description

I'm trying to extend the root Vite config in my theme package while overriding the build.lib.entry option. However, I'm encountering unexpected behavior when using mergeConfig.

Root Vite Config (vite.config.mts)

export default defineConfig({
  build: {
    lib: {
      entry: ["src/index.ts"],
      fileName: (format, entryName) =>
        format === "es" ? `${entryName}.mjs` : `${entryName}.js`,
      formats: ["es", "cjs"],
    },
    rollupOptions: {
      plugins: [nodeExternals()],
    },
  },
  plugins: [
    dts({ tsconfigPath: "./tsconfig.build.json" }),
    checker({ typescript: { tsconfigPath: "./tsconfig.build.json" } }),
    preserveDirectives(),
  ],
});

Theme Package Vite Config (packages/theme/vite.config.mts)
When using mergeConfig:

import { defineConfig, mergeConfig } from "vite";
import baseConfig from "../../vite.config.mjs";

export default defineConfig(
  mergeConfig(baseConfig, {
    build: {
      lib: {
        entry: ["src/foundations/js/index.ts", "src/foundations/css/index.ts"]
      }
    }
  })
);

This results in an error:

vite build
│
│ vite v6.0.2 building for production...
│ ✓ 0 modules transformed.
│ x Build failed in 623ms
│ error during build:
│ Could not resolve entry module "src/index.ts".
│ at getRollupError (file:///Users/leejha/projects/design-system/nod
│ e_modules/.pnpm/rollup@4.28.0/node_modules/rollup/dist/es/shared/parse
│ Ast.js:396:41)
│ at error (file:///Users/leejha/projects/design-system/node_modules
│ /.pnpm/rollup@4.28.0/node_modules/rollup/dist/es/shared/parseAst.js:39
│ 2:42)
│ at ModuleLoader.loadEntryModule (file:///Users/leejha/projects/des
│ ign-system/node_modules/.pnpm/rollup@4.28.0/node_modules/rollup/dist/e
│ s/shared/node-entry.js:20109:20)
│ at async Promise.all (index 0)
│  ELIFECYCLE  Command failed with exit code 1.
│ command finished with error: command (/Users/leejha/projects/design-sy
│ stem/packages/theme) /Users/leejha/.nvm/versions/node/v20.16.0/bin/pnp
│ m run build exited (1)

However, using spread operator works fine:

import { defineConfig } from "vite";
import baseConfig from "../../vite.config.mjs";

export default defineConfig({
  ...baseConfig,
  build: {
    lib: {
      entry: ["src/foundations/js/index.ts", "src/foundations/css/index.ts"],
    }
  }
});

Questions

Is my usage of mergeConfig incorrect? If so, what's the proper way to use it in this case?
If using the spread operator works, is it safe to use it instead of mergeConfig? Are there any potential issues I should be aware of?

Environment
Vite version: [6.0.2]
Node.js version: [20.16]
OS: macOS

[Leejha]

│   entry: [
│     'src/index.ts',
│     'src/foundations/js/index.ts',
│     'src/foundations/css/index.ts'
│   ],

[trusktr]

Easily override an array like this:

const config = mergeConfig(
  configA,
  configB,
);

// override some array *after* merging.
config.test.includes = ['foo/*.js', 'bar/*.js']

export default config