Make React components available as dependency

Question

blz? i have some React components here and need to make all of them available in one dependency only, semantic style, how can I do this?

i am trying to export the components on an index importing and exporting all but I’m having a problem

in the design that uses component dependency, the js that arrives does not come transpiled

ex: in the design with the components I do an index and import the components so

[image 1]

in the project that uses the dependency I import the components, but if I send a build it gives this error

[image 2]

if I don’t build and start at once, the project under but gives an error in the js of the navigated pq components js are coming as es6

[image 3]

anyone who can be? and how to solve?

Obs: sorry the image, I can not put more than 1 link

Answer 1

You need to compile your lib before using it, this is the best way to reuse your components in another project.

Knowing that, now the question that remains is, how to do?

If you are using Webpack, keep using it, but watch out for the changes you need to make to publish your project as a library, recommend following the Webpack documentation itself so you can do this in your project:

https://webpack.js.org/guides/author-libraries/#Components/sidebar/sidebar.jsx

If you are not using Webpack, I recommend using it or using Rollup.js which is a solution created specially for this purpose.

An important detail for you to get attached is about the stylesheets. Try to extract them into a file .css separate, if you do not, the styles of your components will be embedded together with logic (script), which will imply in loss of performance and visually will seem strange too.