Difference between revisions of "Sharing a React component library in monorepo"

Revision as of 13:40, 26 January 2026

Components

Creating the project

 bun create vite@latest . components --template react-ts

Changes

package.json

name and exports are important

{
  "name": "@my/ui",
  "version": "1.0.0",
  "main": "src/index.ts",
  "module": "src/index.ts",
  "type": "module",
  "exports": {
    ".": "./src/index.ts"
  }
}

packages/ui/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "composite": true,
    "declaration": true,
    "declarationMap": true
  },
  "include": ["src"]
}

root tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@my/ui": ["packages/ui/src"]
    }
  }
}

./src/index.ts

Export components without default in the component file.

export * from "./Button";
export * from "./Card";

App

vite.config.ts

Update vite.config wherever you want to use component library

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@my/ui": path.resolve(__dirname, "../../packages/ui/src")
    }
  },
  optimizeDeps: {
    include: ["react", "react-dom"],
    exclude: ["@my/ui"]
  },
  server: {
    fs: {
      allow: [".."] // allow access to packages/
    }
  }
});

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "files": [],
 
}

Import shared component to app

import { Button } from "@my/ui";

export default function App() {
  return <Button />;
}