I am building a React component library using Rollup and TypeScript, and I want to bundle the components so that others on my team can use them in their applications. The problem is my bundle output is missing exports, so my configuration is obviously flawed.
Rollup config:
export default {
input: ['src/Button.tsx'],
output: {
dir: 'build',
format: 'esm',
sourcemap: true,
exports: 'named'
},
plugins: [
typescript({
declarationDir: 'build',
jsx: 'react'
}),
sourceMaps()
]
};
TypeScript config:
{
"include": [
"src",
"types"
],
"compilerOptions": {
"module": "esnext",
"lib": [
"dom",
"esnext"
],
"importHelpers": true,
"declaration": true,
"sourceMap": true,
"rootDir": "./src",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@": [
"./"
],
"*": [
"src/*",
"node_modules/*"
]
},
"jsx": "react",
"esModuleInterop": true
}
}
And finally Button.tsx
:
export enum ButtonSize {
...
}
export enum ButtonType {
...
}
const someVar = ...
interface ButtonProps {
...
}
interface ButtonStyle {
...
}
const buttonStyle: ButtonStyle = {
...
}
const Button: React.FC<ButtonProps> = (p: ButtonProps) => {
...
}
export default Button
The final JavaScript bundle only has everything down to someVar
. Everything below someVar
is missing.
What is it about my configuration and code that leaves these gaps in the JavaScript output?
It turns out the answer was to eliminate all the export default
. Simply exporting as named exports resolved the issue.
The reason?
"Note: default exports cannot be combined and exported by this plugin. Only named exports will be exported."
Which is in the fine print of @rollup/plugin-multi-entry