Madushika Perera
Apr 27, 2023 ⋅ 16 min read

How to build a component library with React and TypeScript

Madushika Perera Software Engineer at FusionGrove

Recent posts:

Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new `defer` feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 ⋅ 10 min read

Using ElectricSQL to build a local-first application

ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.

Rahul Padalkar
Dec 1, 2023 ⋅ 11 min read
Using Rust And Leptos To Build Beautiful Declarative User Interfaces

Using Rust and Leptos to build beautiful, declarative UIs

Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.

Eze Sunday
Nov 30, 2023 ⋅ 10 min read
5 Best JavaScript Multi-Dimensional Array Libraries

5 best JavaScript multidimensional array libraries

Learn more about the 5 best JavaScript libraries for dealing with multidimensional arrays, such as ndarray, math.js, and NumJs.

Pascal Akunne
Nov 30, 2023 ⋅ 4 min read
View all posts

26 Replies to "How to build a component library with React and TypeScript"

  1. Hi,

    Thanks for the wonderful article.

    I getting error while running ‘rollup -c’.

    dist/esm/types/index.d.ts → dist/index.d.ts…
    [!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).

    In the dist folder types are are saved in esm/types/components/Button/index.d.ts

    How to resolve this?

      1. It took me some time, but a was able to solved it!
        Replace “dist/esm/types/index.d.ts” by “types/index.d.ts”

        input: “types/index.d.ts”,
        output: [{ file: “dist/index.d.ts”, format: “esm” }],
        plugins: [dts()],

        1. I still had an error and it took adding “rootDir” to my tsconfig. If no rootDir this error will persist.

  2. The rollup config file is asking for src/index.ts file but not included with article. please share the contents of it. Also can you share code on a github repo?

    1. Hello, I had the same issue. The tutorial doesn’t mention a folder structure, but the thing it that you must have an index.ts file on each component, but also must have one on the components folder itself, with something like ‘export { default as Button } from ‘./Button” (repeat to all your components), and finally another index.ts file on your src folder with something like ‘export * from ‘./components”. Basically, you must have an index.ts on Button folder, then Components folder, then SRC folder, and you should be fine.

  3. Wooow, I dont believe this, a great article, I just want to suggest that you can creat a full react cource entitled creating a component library by react ,,, it would be great.think about it. Anyway I learned so many things from this article.
    thank you.

  4. Hi,
    I stopped on “npm run build” with the following error:

    src/index.ts → dist/cjs/index.js, dist/esm/index.js…
    [!] Error: Could not resolve entry module (src/index.ts).
    at async Promise.all (index 0)

    in this tutorial there are no instructions for creating the “src/index.ts” file, but there is a reference to it in rollup.config.js in line 12

    Fernando Pacheco

  5. I created the file with this content:

    import Button from ‘./components/Button’
    import Input from ‘./components/Input’

    export { Button, Input }

    build without error

  6. Hello all, wonderful article. Please can anyone shar how to use it in a project. I tried importing it like this into a project:

    import { Button } from ‘@philz/react-ui-kit’;

    but got the following error:

    Could not find a declaration file for module ‘@philz/react-ui-kit’

  7. Running into Button is not exported from library error. I have an index file that

    exports * from ‘./components/Button/Button.tsx’

    published and installed the library into a project and getting this error.

    also I’m getting a cannot find type declarations error…

      1. It’s either due to version upgrade or it’s just a bug from the beginning.

        “export *” doesn’t really export default automatically. So I modified the Button.tsx and Input.tsx to not export default but specify explicitly what I want to export, the issue is resolve.

        export default Input;
        modified to:
        export { Input };

  8. I’m getting a bunch of errors relating to styled-components:

    Module not found: Error: Can’t resolve ‘styled-components’ in ‘X:\Github\component-library-test2\node_modules\@lsg2099\react-component-library-test2\dist\esm’

    WARNING in ./node_modules/@lsg2099/react-component-library-test2/dist/esm/index.js
    Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
    Failed to parse source map from ‘X:\Github\component-library-test2\node_modules\@lsg2099\react-component-library-test2\src\components\Button.tsx’ file: Error: ENOENT: no such file or directory, open ‘X:\Github\component-library-test2\node_modules\@lsg2099\react-component-library-test2\src\components\Button.tsx’
    @ ./src/App.tsx 7:0-64 45:37-43
    @ ./src/index.tsx 7:0-24 11:33-36

    WARNING in ./node_modules/@lsg2099/react-component-library-test2/dist/esm/index.js
    Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
    Failed to parse source map from ‘X:\Github\component-library-test2\node_modules\@lsg2099\react-component-library-test2\src\components\Input.tsx’ file: Error: ENOENT: no such file or directory, open ‘X:\Github\component-library-test2\node_modules\@lsg2099\react-component-library-test2\src\components\Input.tsx’
    @ ./src/App.tsx 7:0-64 45:37-43
    @ ./src/index.tsx 7:0-24 11:33-36

    Thats for starters. Most of the others are probably a result of the above failings. Did anyone else have this issue?

    1. You need add package ‘rollup-plugin-sass-modules’, after that add import it to rollup.config.js
      import sassModules from ‘rollup-plugin-sass-modules’;

      and use it in rules:

      sassModules({include: [‘**/*.scss’, ‘**/*.sass’]})

  9. Anybody having “Could not find a declaration file for module” error after publishing your library, You need to add type properties inside package.json.

    “types”: “./dist/index.d.ts”,

  10. hi.
    I getting error while running ‘rollup -c’.
    [!] Error: Could not resolve entry module (rollup.config.js).

  11. I have a similar kind of task, I have a library which is created in typescript and we are using tsc and tsconfig.json to create the package in dist. We are using this package to link to a nextjs project and utilizing the library there, however the issuw we are facing is that we are not able to debug the component from the next js app, we have the source map on in the package but yet while debugging we are not able to get the debugger. We are using visual studio code for executing the next app

  12. Thanks for the article. Apparently it’s just marketing given that there’s been lots of bug reports and no answers or revisions by the “author”

    For me, for example, it says “Now, let’s create our button component:” but it never says what to name the file for that. Same with the input component. No filename is given.

    I guess they were src/component/Button.tsx and src/component/Input.tsx but no idea as I got to “npm run buld” and I got

    [!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to “.mjs”, set “type”: “module” in your package.json file or pass the “–bundleConfigAsCjs” flag.

    That’s because at line 7 the rollup.config.js file uses “require” but that’s not allowed in a module. The author must have had some external options setup for that to work as there’s no way it works by default.

    Changed that to

    import fs from ‘fs’;
    const packageJson = JSON.parse(fs.readFileSync(“./package.json”, ‘utf8’));

    As others pointed out there is no `src/ndex.js` in the article. Tried what someone else posted but then I got

    > rollup -c

    src/index.ts → dist/cjs/index.js, dist/esm/index.js…
    created dist/cjs/index.js, dist/esm/index.js in 604ms

    dist/esm/types/index.d.ts → dist/index.d.ts…
    [!] RollupError: Could not resolve entry module “dist/esm/types/index.d.ts”.
    RollupError: Could not resolve entry module “dist/esm/types/index.d.ts”.
    at error (/Users/gman/src/spector2/node_modules/rollup/dist/shared/rollup.js:206:30)
    at ModuleLoader.loadEntryModule (/Users/gman/src/spector2/node_modules/rollup/dist/shared/rollup.js:23140:20)
    at async Promise.all (index 0)

    Basically AFAIK you should ignore this tutorial and go find another that actually works.

  13. As others have said, this isn’t actually a good guide. Which is a bummer because I’ve seen other good ones from LogRocket. I’m unfortunately adding to the search shenanigans by interacting with it. But I do believe in other LogRocket guides so I feel good about it.

  14. rollup.config.js
    output: [{ file: “dist/types.d.ts”, format: “es” }], –> output: [{ file: “dist/index.d.ts”, format: “es” }],
    rollup-plugin-terser deprecated
    use @rollup/plugin-terser

  15. Thanks for the article, thanks for the april 2023 update, but
    following this instructions still getting error on 04 december 2023:

    1) rollup-plugin-terser deprecated => use @rollup/plugin-terser (but still get an error)
    2) Could not find module ‘tslib’ => npm i -D tslib
    3) Support for the experimental syntax ‘jsx’ isn’t currently enabled => npm i -D @babel/preset-env @babel/preset-typescript @babel/preset-react and add a babel.config.js with: module.exports = {presets: [‘@babel/preset-env’, ‘@babel/preset-typescript’, ‘@babel/preset-react’],};
    4) clean the dist folder before run => npm i -D rollup-plugin-cleaner
    5) types in package.json dont corespond to output in rollup.config.js , the most important part of this tutorial is totally unchecked, in packege.json declare:
    “main”: “dist/cjs/index.js”,
    “module”: “dist/esm/index.js”,
    but these files are not in dist folder after build….

    I didnt get into Storybook, I was able to launch tests with 0 errors, but I wasn’t be able to import its components to another project.

Leave a Reply