Just trying to scaffold a JS/TS monorepo using Turborepo:
.
└── root
├── apps
│ ├── first-app (next.js app)
│ └── second-app (next.js app)
├── configs (ts, tsup)
└── packages
└── ui (react lib)
The public repo for reproduction can be found here. The two issues I have are the following:
1. Next.js app does not seem to recognize conditional exports mjs/cjs extensions from buildable package
Reproduction
# second-app build will fail
pnpm build second-app...
Expected behaviour
Next.js app should be able to resolve mjs/cjs conditional exports
Current workaround
Current hack consists in using js extension for buildable package artifacts:
// ./configs/tsup.config.base.ts
// REPLACE THIS:
outExtension({ format }) {
return {
js: `.${format === "esm" ? "mjs" : "cjs"}` // UNCLEAR WHY THIS DOES NOT WORK???
}
}
// BY THAT:
outExtension({ format }) {
return {
js: `.${format === "esm" ? "esm.js" : "cjs.js"}` // THIS WORKS
}
}
// `./packages/ui/package.json`
// REPLACE THIS:
"exports": {
".": {
"import": "./.build/index.mjs",
"require": "./.build/index.cjs"
}
},
// BY THAT:
"exports": {
".": {
"import": "./.build/index.esm.js",
"require": "./.build/index.cjs.js"
}
},
2. Inconsistent bundle size
Reproduction
# Make sure the changes above are made for builds to work
# This shows 92kb first load JS
pnpm build --filter first-app
# This shows 143kb first load JS ?!
pnpm build --filter second-app...
Expected behaviour
first-app and second-app are the same simple app based on Next.js/MUI template, the only difference being that second-app imports some MUI/emotion related code of the template from the ui buildable package (instead of direct dependencies).
I expected the two app first load JS to be close but it shows nearly c.50kb difference.
Current workaround
None, currently out of idea to solve this properly given my limited experience with bundlers in general.
Thanks much for your help,