DEV Community

Discussion on: How to create an npm library from react components

Collapse
 
erikswed profile image
Hans Erik

Thanks for the tutorial I learn much.
You say to do "npm link" the react-library if wanting to test it in some React App locally.
What about this react-npm-library app we build in this tutorial, that host the react-library. Can I do npm link trying the library?

Collapse
 
jimjunior profile image
Beingana Jim Junior • Edited

npm link is for testing locally in react app in another directory but since the react-library is already in react-npm-library there is no need to link it. But if you link it will also work

Collapse
 
erikswed profile image
Hans Erik

Thanks it's working I publish to npm cool thanks.
But when I npm link I can't compile the exacts same code I think it's missing something in the rollup.config.js look here please:
stackoverflow.com/questions/694119...

Thread Thread
 
erikswed profile image
Hans Erik • Edited

When I do npm link and start server I get the error:
"Failed to compile.
src\react-library\dist\index.cjs.js
Line 11:261: Expected an assignment or function call and instead saw an expression no-unused-expressions"
Am I suppose to change in the package.json the "main": "dist/index.cjs.js", to this: "main": "src/index.js", ?

I Try that with the npm link in place and then get duplicate react hook error even the react-library use peerDependencies in package.json.
reactjs.org/warnings/invalid-hook-...
Please advice

Thread Thread
 
erikswed profile image
Hans Erik

If anyone else need an answer. Thanks I fixed it reading the docs
reactjs.org/warnings/invalid-hook-...
"This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.
Note"