blog/react-library-with-typescript/

[utterances-bot]

How to build a React library using TypeScript

A step by step guide to setup a React Library from scratch using TypeScript, and publish it to NPM.

https://prateeksurana.me/blog/react-library-with-typescript/

[webheybro]

Thank you so much for your article. You make mu happy ^^ But i have an error and i dont understand why... (JSX element type 'SayHello' does not have any construct or call signatures)... I really dont understand.

[prateek3255]

Thanks for the kind words @webheybro

Looks like missed adding a point where you need to build the library as well before using it in the example app, updated the blog now, you can checkout the setting up demo step again for updated steps. Thanks for bringing this to notice 🤗

[Cigan12]

Hey, thank you so much for the great guide, but maybe you can also say, how I can develop my react module with hot reload?)

[Cigan12]

Okay, I found solution, you can just add this command "start": "tsc -w" to your scripts section in package.json, maybe it will help to somebody) Awesome guide, thank you so much)

[amshel]

Do you have a solution for using svg files in the library? I can't make it work

[prateek3255]

@amshel Yes for React, you can create a script that converts your svg files to React components, and you can run that file whenever you build your library or add a new svg file. For example you can take a look on how they did it on the codesandbox-client.

[amshel]

thanks I'll give it a try

[danfusaro]

Fantastic write-up.

[ngvcanh]

Do you have a solution for using CSS inside the library? Thank you for the post.

[prateek3255]

Hey @ngvcanh If you want to use CSS inside library I would recommend that you use a bundler like rollup with a plugin like postcss to bundle your library. I have covered compiling a TypeScript library with rollup and the postcss plugin in one of my other article, you can also use that as reference.

[ngvcanh]

Thank you so much.

[rohanvachheta]

any solution for storing images ?and publishing along with it

[gustavoeffting]

for svg files you can also use @rollup/plugin-image

[traversal]

Thanks so much for this guide Prateek, it's really complete and clear and helped me out hugely today.

[finguer]

sometimes the folder lib/ not generate or create in the project , why ?

[doerme]

Module not found: Can't resolve './Sidebar.module.scss' how to deal the tsx module with sass module

[prateek3255]

Module not found: Can't resolve './Sidebar.module.scss' how to deal the tsx module with sass module

The tsc compiler cannot compile sass files, I would recommend you to use a bundler like rollup to compile and bundle your library. You can checkout how you can compile a TypeScript library in rollup in my other blog.

[prateek3255]

sometimes the folder lib/ not generate or create in the project , why ?

Can you share some reproducible example or a link to the GitHub repo (if it's open source)?

[pcdv]

Hey, thanks for the write up! It was a great help splitting an application into lib + app. However, I had to link a bunch of dependencies to make it work, e.g.

    "react": "link:../node_modules/react",
    "react-dom": "link:../node_modules/react-dom",
    "react-dnd": "link:../node_modules/react-dnd",
    "react-dnd-html5-backend": "link:../node_modules/react-dnd-html5-backend",

I've been trying to use esbuild to build the lib instead of tsc without success. Would you have any pointers?

[prateek3255]

I had to link a bunch of dependencies to make it work,

If its a library then you shouldn't need to link dependencies, especially react and react-dom you should add them as peerDependencies so that they use your client application's modules automatically and add them as devDependencies in your library so that you can use them during library development and testing.

Also if you have external dependencies, I would recommend using rollup to bundle your library. I discussed it in detail in my other blog on how you can achieve that.

[pcdv]

Thanks. I put all my dependencies in peerDependencies but that was not enough. I got all sorts of runtime errors and "npm ls" kept indicating invalid dependencies.

I finally got it to work by linking to ../lib/esm instead of ..

EDIT: my bad, was due to me only building esm and not cjs, so package.json/main was not pointing anywhere.

EDIT2: after witnessing a lot of inconsistent behavior and strange runtime errors, I also realized that yarn does not handle links correctly. Got a lot less issues after using npm or pnpm to install dependencies.

[pcdv]

Looks like the runtime issues I mention in the comment above. May be linked to a duplication of React. Run npm ls to see if you find any errors. Use npm and not yarn to install dependencies (you may have to delete your node_modules/ dir too).

[prateek3255]

Really great post. But I have a problem. I'm trying to build a hook component but I get an error that says; "Invalid hook call. Hooks can only be called inside of the body of a function component.". I'm using useState, useMemo and useEffect in my custom hook.

This looks more like violation of the rules of hooks, are you sure you are using the hook component in a React function component and not some regular function component. Checkout the docs for more info.

[sunwoo0706]

It's a really good post. Thank you !! I will ask you a question. how can I export module by named export?

[sunwoo0706]

I founded it

[anjitpariyar]

And how to make a @types support.

[yuliantosb]

Why I got error Cannot find module 'my-module' or corresponding type declaration

but when I look at the node_modules the package is there, can anyone help me, please

[steveroof]

Thanks, it worked for me.

[thorep]

Im getting error "react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."

Cant for the life of mye figure out why hooks fail....

[steveroof]

@thorep https://stackoverflow.com/a/57422196

[thorep]

steveroof, that worked for the hook errors.. but i still get the same error i get no matter what tutorial i try. It seems that the error moves on to the next error when i remove :IKanbanProps, so, when i move things that are Typescript.

Anyone else have this error?

Compiled with problems:X

ERROR in ../../node_modules/kanban-board-react/dist/components/kanban/Kanban.tsx 16:1

Module parse failed: Unexpected token (16:1) File was processed with these loaders:

• ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | columns, | taskRender,

  }: IKanbanProps) => { | const lanes = useRef(new Map([])); | const [collisions, setCollisions] = useState({});

[ngvcanh]

@thorep

kanban-board-react

let try see examples in here https://codesandbox.io/examples/package/react-kanban-board

[thorep]

@ngvcanh what do you mean? you link to a different package.

This is my package: https://www.npmjs.com/package/kanban-board-react you are linking to react-kanban-board

[NourIM]

great and very helpful post, thank you! :)