Discussion on: How to Create and Publish a React Component Library

[Dario Regazzoni]

Hey @alexeagleson , first of all thank you for this awesome tutorial, i've learnt a lot !

Could i ask you some help on some errors i got after trying out to expand this base.

I've added more components (2) on the library, so my index.ts in the components folder is looking like that now:

export { default as HVButton } from "./Atoms/HVButton"; // as your example
export { default as HVTag } from "./Atoms/HVTag"; // new one
export { default as HVRating } from "./Molecules/HVRating"; // new one

As i recall in your video, you mentioned that it should look like this when you want to have more components.

I am a bit more worried about two erros that i got when i import the HVTag and and the HVRating.

HVTag is a dump component, and only use Styled components behind the scene, here is the error:

1. react.development.js:1659 Uncaught TypeError: Cannot read properties of null (reading 'useDebugValue')
2. Warning: Invalid hook call. 

HVRating is a component that have some useState hooks inside, and the errors are the following when importing him :

1. Uncaught TypeError: Cannot read properties of null (reading 'useState')
2. Warning: Invalid hook call

Do you have any clues/obvious mistake that i might have done that come to your mind by reading this ?

Thank you for the time taken reading my question, and have a wonderful day!

In case, the repository is there: github.com/DarioRega/component-lib...

Also, I've added tailwindcss and styled components as well, regarding tailwind i did only an extra config for storybook to pick it up (and it works).

However when importing my Button that has tailwind classes on the main project, styles don't appears, but not a big issue, i can investigate that.