Discussion on: How to Create and Publish a React Component Library

[Michael Drayer]

Hey Alex,

I was running into the same issue, even using your repository. On npm run rollup, I was getting the following warnings:

src/index.ts → dist/cjs/index.js, dist/esm/index.js...
(!) Plugin typescript: @rollup/plugin-typescript TS4082: Default export of the module has or is using private name 'ButtonProps'.
src/stories/Button.stories.tsx: (7:1)

  7 export default {
    ~~~~~~~~~~~~~~~~
  8   title: 'Example/Button',
    ~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 13   },
    ~~~~
 14 } as ComponentMeta<typeof Button>;
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

While the package built out fine, it also included components and type files for the various Storybook and test files within the src directory, for example dist/esm/types/stories/Button.d.ts, dist/esm/types/components/Button/Button.stories.d.ts and dist/esm/types/components/Button/Button.test.d.ts were all created. My solution was to add test and stories files to the exclude arg in the typescript() plugin:

typescript({
  exclude: [
    // Exclude test files
    /\.test.((js|jsx|ts|tsx))$/,
    // Exclude story files
    /\.stories.((js|jsx|ts|tsx|mdx))$/,
  ],
  tsconfig: "./tsconfig.json",
}),

There are probably other ways to exclude these files from the rollup bundler, but this worked for me. Thanks for the tutorial by the way! I've been in webpack land for a while, so it's interesting to see how other bundlers are being used.

[Rahul Raveendran]

I think we can also add files to exclude in the tsconfig.json file

{
  "compilerOptions": {
  },
  "exclude": [
    "src/stories",
    "**/*.stories.tsx"
  ]
}

I don't know which one is better. This solution also worked for me