How to bundle a UI library within a monorepo?

I’ve spent a good week trying to figure this out and feel like I’m hitting my head against a wall.

I’m using Turbo as a monorepo and have simply used the create-turbo@latest command, detailed here.

The default ui/package works fine, but I don’t want to manually export everything in the package.json as below (source code here):

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./button": "./src/button.tsx",
    "./card": "./src/card.tsx",
    "./code": "./src/code.tsx"
  },
  "scripts": {
    "lint": "eslint . --max-warnings 0",
    "generate:component": "turbo gen react-component"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
    "@turbo/gen": "^1.12.4",
    "@types/node": "^20.11.24",
    "@types/eslint": "^8.56.5",
    "@types/react": "^18.2.61",
    "@types/react-dom": "^18.2.19",
    "eslint": "^8.57.0",
    "react": "^18.2.0",
    "typescript": "^5.3.3"
  }
}

I’ve checked Steven Tey’s rather amazing Dub.co and wanted to attempt to use TSUP to compile my UI library. I configured everything exactly the same way he did, right down to the tsconfig, but this keeps giving me errors in my web app of the UI library not being found (although it works fine and uses the UI elements). Further to this, it is also totally breaking on some of my UI components. I know they’re all OK as I’ve used them across other projects for years without issue, it’s only in the monorepo do some now break.

I’ve also tried changing my ui library package.json to simply push the entry point to “src/index.tsx” which houses all of my exports/imports. That src/index.tsx looks like this:

import "./globals.css"

export * from "./tw-indicator"

// Shad components
export * from "./ui"

// Folders
export * from "./forms"
export * from "./layouts"
export * from "./typography"
export * from "./icons"

This however gives me errors such as the below:

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
This error happened while generating the page. Any console logs will be displayed in the terminal window.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
....node_modules.pnpm@[email protected]_@[email protected][email protected][email protected] (4:82)
(rsc)/../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-direction/dist/index.mjs
file:/C:/Code/Test%20Project/testproject/apps/web/.next/server/vendor-chunks/@[email protected]_@[email protected][email protected] (30:1)

It seems that no matter how I configure the package.json of the ui library, tsconfigs, tsup, I always end up with a litany of errors.

Any way I attempt to bundle the UI library just doesn’t work. Has anyone had any success doing this without receiving errors?