Vite bundled output includes react hooks

[samMcCarthyANDDigital]

Hi
hoping for a simple resolution to an issue I've been having

We currently have vite running in lib mode as a design system with a number of components. This design system is imported to a nextjs 15 app using app router.

The issues we've come across are that as a few of these components need to implement react hooks the hooks are bundled into the outputted dist folder, When this is imported by a section in next we get an error about importing hooks this is then causing us to need to include use client at the top of every component that imports the design system even if the specific component being imported doesn't use a react hook

This is our current vite.config.js file:

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react-swc";
import { resolve } from "path";
import dts from "vite-plugin-dts";
import tailwindcss from "@tailwindcss/vite";
import { fileURLToPath } from "url";
import { dirname } from "path";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "./lib/index.ts"),
      name: "react-design-ui",
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom", "react/jsx-runtime"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
    sourcemap: true,
    emptyOutDir: true,
  },
  plugins: [
    [react()],
    dts({
      rollupTypes: true,
    }),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@components": resolve(__dirname, "lib/components"),
      "@icons": resolve(__dirname, "lib/icons"),
      "@utils": resolve(__dirname, "lib/utils"),
      "@lib": resolve(__dirname, "lib"),
      "@hooks": resolve(__dirname, "lib/hooks"),
    },
  }
});

our package.json:

{
  "name": "@react-component-library/ui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "./dist/index.umd.js",
  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "require": "./dist/index.umd.js",
      "import": "./dist/index.es.js"
    },
    "./style.css": "./dist/ui.css"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "buildWatch": "tsc -b && vite build --watch",
    "lint": "eslint .",
    "preview": "vite preview",
    "test": "vitest run",
    "check-types": "tsc --noEmit",
    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf coverage && rm -rf tsconfig.tsbuildinfo"
  },
  "dependencies": {
    "classnames": "2.5.1"
  },
  "peerDependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
 ... left these out
  },
  "optionalDependencies": {
    "@swc/core-linux-x64-gnu": "^1.3.7",
    "@tailwindcss/oxide-linux-x64-gnu": "4.0.0",
    "lightningcss-linux-x64-gnu": "1.29.1"
  }
}

and our first 2 lines from index.es.j:

import f3, { jsx as e, jsxs as E, Fragment as d3 } from "react/jsx-runtime";
import V, { forwardRef as C3, useState as K, useRef as r1, useEffect as v3 } from "react";