Issues with building package to be consumed -- requested module 'node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js' does not provide an export named 'default'
- Dominant language
- TypeScript
- Stars
- 11.3k
- Forks
- 274
- PR merge metrics
- No merged PRs in 30d
Description
Hi all,
I'm facing a couple of build/runtime issues while integrating our core‑ui package (built with tsup) into a consumer app that uses Vite. It was originally built as a monorepo, but now the core‑ui package is split into its own repo and installed as a dependency in our consumer app. The core‑ui package declares several peer dependencies (e.g. React, mui/material, mui/styled , etc.) which are externalized during the build. Core-ui has several React components used in other projects.
Edit: Forgot to mention, using the pack with npm link works
Issues Encountered:
Dynamic Require of "stream": When running vite start (or during build), I get an error:Dynamic require of "stream" is not supported I've attempted to resolve this by aliasing "stream" to stream-browserify in the Vite config, along with configuring commonjsOptions, but the issue persists.
Missing Default Export for hoist‑non‑react‑statics: Despite using noExternal for hoist‑non‑react‑statics in tsup, the bundled output still throws an error at runtime (or build time) stating:'default' is not exported by node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js I understand that this CommonJS module doesn’t have a default export, and I’ve tried approaches like creating a custom wrapper module, but I'm still encountering issues.
The stream error I get when I don't include peerDeps as external, but have tried so many different ways, I am stumped..
This is latest tsup config
```
import { defineConfig } from 'tsup'
import pkg from './package.json'
export default defineConfig({
entry: ['src/index.ts'],
outDir: 'dist',
format: ['esm', 'cjs'],
dts: true,
splitting: false,
clean: true,
sourcemap: true,
shims: true,
// Externalize all peerDependencies and dependencies so that the consumer app provides them
external: [
...Object.keys(pkg.peerDependencies || {}),
...Object.keys(pkg.dependencies || {}),
],
// Force tsup to bundle hoist-non-react-statics to transform its CommonJS exports into an ESM default export
noExternal: ['hoist-non-react-statics'],
})
```
Core-ui (package to be consumed) package.json:
```
{
"name": "@test/ui-core",
"peerDependencies": {
"@emotion/react": "11.7.0",
"@emotion/styled": "11.6.0",
"@mui/lab": "5.0.0-alpha.66",
"@mui/material": "5.2.2"
},
"devDependencies": {
"@types/node": "16.9.1",
"@types/react": "17.0.24",
"@types/react-dom": "17.0.9",
"@types/react-test-renderer": "^17.0.1"
}
}
```
Consumer-app (package.json)
```
{
"name": "@test/ui-ab-app",
"dependencies": {
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.0"
},
"devDependencies": {
"@types/react": "17.0.24",
"@types/react-dom": "17.0.9",
"@types/react-router-dom": "^5.3.0",
"@vitejs/plugin-react": "2.0.1",
"typescript": "4.5.5",
"vite": "3.0.6"
}
}
```
Contributor guide
Research direction
Start with the tsup configuration and src/index.ts, then inspect the core-ui and consumer package.json files and reproduce the installed-package build in Vite rather than the working npm-link setup. Trace the generated ESM/CJS output around stream and hoist-non-react-statics; done means the consumer builds and runs without either reported error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- node.js, typescript, vite
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100