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

[Gerald Jeff Torres]

HI Alex,

This is an amazing tutorial but I ran into a problem after installing storybook.
I was not able to run 'npm run rollup' because of the new storybook files and folders'.

Am I missing anything in the rollup.config.js file that will ignore these files from being bundled?

[Alex Eagleson]

Hey there, I don't believe that anything in the rollup config was impacted by the installation of storybook. What was the error specifically? You can try cloning the repo linked at the top of the tutorial which has a working version all combined together, and then begin to compare that with your implementation piece by piece to see where the difference might lie.

[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