For an RN app I’m co-developing we have several repos that work together. One of the repos acts a library for other repos to use. During development, in order to test a few things out, we sometimes need to have the local dev version of the library repo work with one of the other repos (e.g. the local dev version of the library-repo is a dependency of another repo).
For regular JS apps we’d use
yarn link to get this working. For React Native however, that approach doesn’t work: the Metro Bundler can’t cope with symlinked dependencies (See
facebook/metro issue #1).
The solution we found was to use wml – which uses
watchman under the hood – for this:
Wml is an alternative to symlinks that actually copies changed files from source to destination folders.
Wml is a CLI tool that works pretty much like
ln -s. You first set up your links by using the
wml addcommand and then run the wml service (
wml start) to start listening. That’s it!
Usage is as follows:
# add the link to wml using `wml add <src> <dest>` wml add ~/my-package ~/main-project/node_modules/my-package # start watching all links added wml start
Installation per NPM/Yarn:
yarn global add wml
Do note that wml is not perfect. Quite regularly we noticed that things just stopped working, and wrong (cached) includes were made, the bundler would complain about two packages providing React Native, etc. In that case the solution was to quit and reset just about everything:
# remove all wml links wml rm all # reset watchman watchman watch-del-all # clean up node_modules and reinstall dependencies rm -rf ./node_modules yarn install # now re-add your wml links
Also note that wml alters your
.watchmanconfig file in the source folder so that it ignores the locale
node_modules folder. Don’t forget to reset it once you’ve stopped with wml.
So yeah … it’s a bit of an unstable solution (but it might help you forward).
Reading up on the original Metro issue I noticed that this possible workaround was mentioned in it … haven’t tested it though.