I have a monorepo that includes a Next.js application front-end, an Express back-end, and a component library. The component library is bundled with tsup using the following configuration:
import { defineConfig } from "tsup";
export default defineConfig({
entry: {
index: "src/index.ts",
"apps/index": "src/applications/index.ts",
"surprises/index": "src/surprises/index.ts",
},
});
with the following tsconfig.json
:
{
"include": ["."],
"compilerOptions": {
"isolatedModules": true,
"typeRoots": ["./types"],
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"incremental": false,
"lib": ["es2022", "DOM", "DOM.Iterable"],
"moduleDetection": "force",
"noUncheckedIndexedAccess": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "ES2022"
},
"exclude": ["node_modules", "dist"]
}
Everything works fine and the Next.js application is able to consume my component library. I would like to upgrade this component library to become a shared library. This makes sense semantically because each exported component uses a particular Express route, so that perhaps now an exported member of the shared library is in the following form:
import { Router } from "express";
import { FC } from "react";
export interface IExportedMember {
component: FC,
router: Router
}
With this, the Next.js application now needs only to import the member and access its component
property.
However, importing the member into the Next.js application causes module resolution errors such as: Module not found: Can't resolve 'async_hooks' in '/workspaces/ava/node_modules/.pnpm/[email protected]/node_modules/on-finished'
. This is further complicated by my use of the Node.js mongodb
driver, which makes the browser attempt to resolve Node.js APIs such as fs
and dns
.
Is there any way to make my intention possible to implement with tsup? Thanks!