DEV Community

Cover image for How to handle peer dependencies when developing modules

How to handle peer dependencies when developing modules

🦁 Yvonnick FRIN on June 11, 2019

What is a peer dependency and what is the problem with it? Peer dependencies are a specific kind of dependencies really useful for reusa...
Collapse
 
arcanis profile image
Maël Nison • Edited

The yarn link implementation will, from the v2 onward, be able to properly follow peer dependencies. So if you're developing react-foo which has a peer dependency on react, you'll just have to go into your application, run yarn add react, yarn link ~/react-foo, and you'll be ready to go.

Collapse
 
yvonnickfrin profile image
🦁 Yvonnick FRIN • Edited

Really nice to hear Maël! I can't wait to test yarn v2. Is there an alpha version available or something similar?

Collapse
 
arcanis profile image
Maël Nison

We're developing it over at github.com/yarnpkg/berry - it's usable, but still developer preview for now 🙂

Collapse
 
dspacejs profile image
Daniel Spajic

Is there a way to get this to work with other peer dependencies? It works great when it's just react, but I have several peer dependencies (such as react-redux) which is causing conflicts. I've been messing around with this a lot and I'm having trouble getting it to work.

Collapse
 
yvonnickfrin profile image
🦁 Yvonnick FRIN

You tried to do the same trick described in the article for react (linked module dependency directly into your host app) ? I agree this is a bit messy. You can use yarn v2 to fix this problem (I guess). See Maël Nison's comment on this article. He explains how it works in yarn v2 and where you can install this new version 👍

Collapse
 
dspacejs profile image
Daniel Spajic

Oh that's a better solution, thanks. I'd use that but my team uses NPM. I ended up just installing the peer dependencies for our library into peer_deps/node_modules so it's not picked up by the app but can still be used by the library during development.

Collapse
 
sevenzark profile image
Dave M

Unfortunately, the linking solution for the React library did not work for me. The link seemed to set up just fine, but when I launched the consumer app I got the dreaded "Invalid hook call," same as before setting up the link to react.

Collapse
 
jusufa profile image
Angela J

It didn't work for me too in the beginning, but after I deleted the node_modules in the library, reinstall and did the linking again between the library and parent App, it works. Maybe something you could try.

Collapse
 
sevenzark profile image
Dave M

I do know to try this, but unfortunately it does not resolve the problem. I have run into this again while trying to develop a library. Very frustrating and link simply doesn't work to resolve this at all.

Collapse
 
jdnichollsc profile image
J.D Nicholls

Do you have experience with this error?

Only run install-peer-deps after install command. Skipping.

Thanks in advance!

Collapse
 
yvonnickfrin profile image
🦁 Yvonnick FRIN • Edited

Hi Juan David Nicholls Cardona. Did you have this message using install-peer-deps in the prepare script ?

Collapse
 
jdnichollsc profile image
J.D Nicholls

yes, but only using npm, it was fixed by using yarn instead, thanks!

Thread Thread
 
sevenzark profile image
Dave M

It's unfortunate that someone would make a package that only works with yarn! We can't just change our standards to use yarn just for one library. :(

Thread Thread
 
sevenzark profile image
Dave M

Okay, I got it to work with npm by appending the force flag (-f), so my script command is now "install-peers -f". Seems to be a bug in the library and there is an open github issue already about this.

Thread Thread
 
urrutiamartin profile image
Urrutia Martin

You can use "postinstall": "install-peers", this command run after the package is installed.
This work for me.

Collapse
 
enbonnet profile image
Ender Bonnet

Thanks you, i found that comment from Dan but i really don't understood how to do it

Collapse
 
yvonnickfrin profile image
🦁 Yvonnick FRIN

So it works fine for you now?

Collapse
 
enbonnet profile image
Ender Bonnet

Yes! It works!

Collapse
 
cristianmorenoruiz profile image
cristian-moreno-ruiz

I think a simpler solution is to add the peerDeps also as devDeps. I don't know if it is the best one, but is way simpler than what you propose here.

Collapse
 
sevenzark profile image
Dave M

That is one way to do it. One disadvantage, though, is having to manually keep dev and peer in sync. The advantage is not needing another library to install peers. So it's a matter of which trade-off you prefer. Myself, I'm more worried about the error-prone nature of manually duplicating two lists in my package.json so I'm standardizing on just going and using install peers. But I also understand why someone would want to avoid yet another library.

Collapse
 
yvonnickfrin profile image
🦁 Yvonnick FRIN

Thank you for sharing! I'll test it and a note about it in the article 👌

Collapse
 
yechenchao profile image
Peter Ye

Thanks for the useful guide! The original package read me didn't say much about this usage.

Collapse
 
pp profile image
Paweł Ludwiczak

🙌

Collapse
 
isabellachen profile image
Isa Chen

If its failing in the tests, put 'react' in both peer-dependencies and dev-dependencies.