2024-02-15
3779
#react#typescript
Yan Sun
83862
Feb 15, 2024 ⋅ 13 min read

How to build a component library with React and TypeScript

Yan Sun I am a full-stack developer. Love coding, learning, and writing.

Recent posts:

Nx Adoption Guide: Overview, Examples, And Alternatives

Nx adoption guide: Overview, examples, and alternatives

Let’s explore Nx features, use cases, alternatives, and more to help you assess whether it’s the right tool for your needs.

Andrew Evans
Mar 28, 2024 ⋅ 9 min read
Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 ⋅ 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 ⋅ 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 2024 ⋅ 8 min read
View all posts

27 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

  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