1

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?

2
  • That doesn't make any sense. The default export Button is being lost, but other exports from this file are making it into the bundle? If you move const someVar to a different spot, does that change what gets exported? Commented Jun 4, 2020 at 22:59
  • You're telling me. Anyway, with tree shaking off, moving someVar doesn't change anything--meaning it's there. I should note in real life someVar makes reference to the values in ButtonType FWIW Commented Jun 4, 2020 at 23:03

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.