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?
Buttonis being lost, but other exports from this file are making it into the bundle? If you moveconst someVarto a different spot, does that change what gets exported?someVardoesn't change anything--meaning it's there. I should note in real lifesomeVarmakes reference to the values inButtonTypeFWIW