Using Vite and react to build a Component Library giving export 'createElement' (imported as 'l') was not found in 'react' (module has no exports).

[ashishsophos]

vite.config.ts

import react from "@vitejs/plugin-react";
import { resolve } from "path";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import tailwindcss from 'tailwindcss';
import tsConfigPaths from "vite-tsconfig-paths";
import * as packageJson from "./package.json";

const name = `rcl`;

export default defineConfig((configEnv) => ({
  plugins: [
    react(),
    tsConfigPaths(),
    dts({
      include: ["src"],
    }),
  ],
  css: {
    postcss: {
      plugins: [tailwindcss],
    },
  },
  build: {
    lib: {
      entry: resolve("src", "index.ts"),
      name,
      formats: ["es", "cjs"],
      fileName: (format) => `${name}.${format === "cjs" ? "cjs" : "es.js"}`,
    },
    optimizeDeps: {
      exclude: Object.keys(packageJson?.peerDependencies),
      include: 'rcl'
    },
    esbuild: {
      minify: true,
    },
    rollupOptions: {
      external: ["react", "react-dom", "tailwindcss"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
          tailwindcss: "tailwindcss",
        },
      },
    },
  },
}));

package.json

{
  "name": "rcl",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "require": "./dist/rcl.cjs",
      "import": "./dist/rcl.es.js"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "prepublishOnly": "npm run build",
    "prepare": "husky install",
    "lint": "eslint --fix"
  },
  "dependencies": {
    "primereact": "^9.5.0"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.18",
    "@storybook/addon-interactions": "^7.0.18",
    "@storybook/addon-links": "^7.0.18",
    "@storybook/blocks": "^7.0.18",
    "@storybook/react": "^7.0.18",
    "@storybook/react-vite": "^7.0.18",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.14",
    "concurrently": "^8.0.1",
    "eslint": "^8.36.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-import-resolver-typescript": "^3.5.3",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.6.12",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.0",
    "postcss": "^8.4.24",
    "prettier": "^2.8.5",
    "prop-types": "^15.8.1",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.60.0",
    "sass-loader": "^10.4.1",
    "storybook": "^7.0.18",
    "tailwindcss": "^3.3.2",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vite-plugin-dts": "^2.1.0",
    "vite-plugin-linter": "^2.0.2",
    "vite-tsconfig-paths": "^4.0.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "lint-staged": {
    "*.{js,jsx,tsx,ts,css,md}": "prettier --write",
    "*.{js,jsx,ts,tsx}": "eslint --fix"
  },
  "overrides": {
    "react": "^18.2.0"
  }
}

[ArnaudBarre]

Ideally a small stackblitz repro will be helpful to debug this.

Just so that you're know, the lib mode is not a priority in Vite support. Quoting patak:

We've been discussing with some others in the team about Vite lib mode. For many of us, lib mode isn't a polished feature for Vite core and we aren't that kin to extend it further. The issue is that libraries have different requirements from apps. Lib mode was done to be able to reuse the vite pipeline and I think it makes sense maybe when building a small components library. But even then, it may be better to let each framework decide which is the best setup (SvelteKit has a lib mode for example). For general libs, there are great options: rollup, esbuild, tsup, unbuild. It is telling that the Vite ecosystem generally doesn't use Vite lib mode (check how plugins are build for example).