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

Answer 3

Ran into the same problem. While I could not make npm link work as it should, I worked around it by installing the local package in the project folder

npm install ../<package-folder> --save

This will install the package like a regular package but from the local folder. The downside is that the changes you make on the package will not be reflected. You will have to npm install after every change.

Answer 4

Change your package.json

//...
"dependencies": {
   //...
    "my-button" : "file:../"
  },
//...

Answer 5

Try to run

npm run watch

inside the button package. Currently, I'm using this to apply changes from the library to my main project. Please let me know if it works!