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:

Exploring Hurl An Alternative To Postman

Exploring Hurl, a command line alternative to Postman

Hurl is an excellent Postman alternative that improves the DX of working with APIs through the command line.

Nwani Victory
May 20, 2024 ⋅ 8 min read
How To Integrate WunderGraph With Your Frontend Application

How to integrate WunderGraph with your frontend application

Unify and simplify APIs using WunderGraph to integrate REST, GraphQL, and databases in a single endpoint.

Boemo Mmopelwa
May 17, 2024 ⋅ 5 min read
Understanding The Latest Webkit Features In Safari 17.4

Understanding the latest Webkit features in Safari 17.4

The Safari 17.4 update brought in many modern features and bug fixes. Explore the major development-specific updates you should be aware of.

Rahul Chhodde
May 16, 2024 ⋅ 10 min read
Using Webrtc To Implement Peer To Peer Video Streaming In A Node Js Project

Using WebRTC to implement P2P video streaming

Explore one of WebRTC’s major use cases in this step-by-step tutorial: live peer-to-peer audio and video streaming between systems.

Oduah Chigozie
May 16, 2024 ⋅ 18 min read
View all posts

29 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.

    1. Hi, I followed this tutorial and a bit of what you have done and successfully deployed my library. But I am not able to import the components into a different library.

  16. Haven’t read this article but leaving feedback anyway. As of today April 6, 2024 it has a published date of Feb 15, 2024. That makes me want to read it. But as soon as I see it’s using create-react-app, which was deprecated over a year ago, I am no longer interested. I understand the challenge of staying up-to-date with the latest tech but we’re not talking about the latest release of create-react-app being over a year ago, we’re talking about how in March 2023, React devs themselves no longer recommend it. That’s a big difference.

Leave a Reply