React Native: npm link local dependency, unable to resolve module

Question

I am developing a button ui package for react native. I try to build an example project to test this button. The directory structure is as follows:

my-button/     package.json     index.js     example/         package.json         index.js 

I try to use npm link:

cd my-button npm link  cd example npm link my-button 

In example/node_modules/ I can see my-button symlink, VSCode also can auto complete function in my-button package.

But execute example app will show error:

Unable to resolve module my-button ... Module does not exist in the module map or in these directories: ... 

But the path in the error message is correct.

Don't know where I was wrong, or in React-Native have any special way to deal with link local dependency?

I also tried npm install file:../.. It works fine in this way, but not easy to update dependency in example/ after I edited my-button.

Answer 1

The npm link command doesn't work because React Native packager doesn't support symlinks.

After a little research, I discovered that there are two ways to go about it.

1. Use haul packager in the example app. Haul supports symlinks, so you can use npm link as usual.
2. Use local dependency via file:../ and then edit files in node_modules folder or reinstall every time you make changes.

I found Haul to work great for this use-case and even set-up a little starter project that also includes storybook, which is really helpful if you have many components to switch between.

Answer 2

Try wml (https://github.com/wix/wml)

It's an alternative to npm link that actually copies changed files from source to destination folders

# 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