I have three packages I am developing locally:
- @AcmeOrg/A (the host-app)
- @AcmeOrg/B (the sub-app)
- @AcmeOrg/C (a feature for the sub-app)
A depends on B, B depends on C
All 3 have a few common "peer" dependencies: i.e React and some other React-based packages.
All 3 use the watch functionality of webpack to recompile on changes. I want to develop all three simultaneously.
Initially, I tried through NPM link:
# in @AcmeOrg/C
npm link # make this package linkable
npm run watch
# in @AcmeOrg/B
npm link # make this package linkable
npm link @AcmeOrg/C # link to the local copy of @AcmeOrg/C
npm run watch
# in @AcmeOrg/A
npm link @AcmeOrg/B # link to the local copy of @AcmeOrg/B
npm run watch
This gets most of the way there - I can see all 3 packages recompiling on changes.
However, in-browser, I am seeing this React error triggered by code exported from C and imported in B:
Uncaught Error: 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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this
Doing this helped a bit:
# in @AcmeOrg/C
npm link ../path/to/B/node_modules/react
...but it seems like I need to do this for every single common dependency between the two packages. i.e any common dependency that creates a React ContextProvider.
Questions:
- is there a better way than the above to locally link packages, without having to worry about the common peer dependencies between them?
