2023-04-27
4716
#react#typescript
Madushika Perera
83862
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 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
Dom Scandinaro Leader Spotlight

Leader Spotlight: Leading by experience with Dom Scandinaro

We spoke with Dom about his approach to balancing innovation with handling tech debt and to learn how he stays current with technology.

Jessica Srinivas
Nov 30, 2023 ⋅ 6 min read
View all posts

25 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

    Regards,
    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.

        Example:
        original:
        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

Leave a Reply