React Native: npm link local dependency, unable to resolve module
React NativeNpmNpm LinkReact Native Problem Overview
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.
React Native Solutions
Solution 1 - React Native
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.
- Use haul packager in the example app. Haul supports symlinks, so you can use
npm link
as usual. - Use local dependency via
file:../
and then edit files innode_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.
Solution 2 - React Native
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
Solution 3 - React Native
I couldn't always make it work with yarn link. What i found extra useful is yalc:
First install it globally once forever:
npm install -g yalc
In the local library/package (i'll call it my-local-package
), and run:
yalc publish
Then in your project which uses my-local-package as a dependency, run:
(if you already have added it with any other way, first uninstall it (npm uninstall -S my-lockal-package
)
yalc add my-local-package
npm install
If my-local-package is a native module, then run react-native run-android
to link the dependency. (or run-ios)
If you make any change in the my-lockal-package, then:
cd path/of/my-local-package
yalc push //updates the local package
cd path/to/my-project
npm install
react-native run-android (or run-ios)
In case the update hasn't been applied, try to cd android && ./gradlew clean && cd ..
and then rerun: react-native run-android
.
Solution 4 - React Native
I'm having the same issue while developing a native module wrapper around an existing native SDK. At first I followed @aayush-shrestha's suggestion to install the package locally. Like this:
npm install ../<package-folder> --save
This works as long as I reference the module via NativeModules
. Import it:
import { NativeModules } from 'react-native';
And then access a module called ActualModuleName
like this:
NativeModules.ActualModuleName
But it fails when I attempt to import the module by name:
import { ActualModuleName } from 'react-native-actualmodulename'
To make that work I had to first pack the package. Run this in the package's root directory:
npm pack
This generates a gzipped tarball:
react-native-actualmodulename-1.0.0.tgz
Now install that in your app:
npm install <path/to>/react-native-actualmodulename-1.0.0.tgz
An enormous downside to this is that you have to re-pack the package every time you make a change to the module. The only workaround I know of is to modify the package's files in node_modules
directly and then copy those changes back to your repo when you're done.
But the upside is that your app's source can import ActualModuleName
the same way you'll import it once it's released via npm
; no environment-specific code necessary.
Solution 5 - React Native
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.
Solution 6 - React Native
Change your package.json
//...
"dependencies": {
//...
"my-button" : "file:../"
},
//...
Solution 7 - React Native
You can use npm link using Metro. Just add the source folder of the linked package to watchFolders
in your metro.config.js
.
Solution 8 - React Native
I ran into the same problem.
I tried to install a local module using npm
, and kept running into the issue of not being able to resolve the module, even though I could see the folder in node_modules and autocomplete of class and method names worked.
I was able to bypass it by installing the local library using yarn
instead of npm
after seeing this open issue on github. Issue was opened September 2020 and no comment from Facebook as of yet.
Solution 9 - React Native
This work for me:
step 1 go to package:
npm link packageNameHere
This will link this package to global node_module
step 2 go to directory which you want to use this package and run these
npm link pathToPackageDirectory
npm install pathToPackageDirectory
ex: npm link ~/myDemoPackage
This will link global node_moudle to this project
If you want to import package to file, USE FILE PATH INSTEAD OF PACKAGE NAME !
ex:
my package name is stripe-api-helper. my code are in src/index.ts then I need to resolve like this:
import { postStripe, Item } from '@aliciaForDemo/stripe-api-helper/src'
if u use '@aliciaForDemo/stripe-api-helper' it will fail.
Solution 10 - React Native
For those still looking for a simple solution without other dependency, try this:
yarn --version
1.21.1
npm --version
6.13.4
- Install in project root
cd my-button
yarn install or npm install
- register linking in my-button
yarn link or npm link
- Install example project
cd example
yarn add ../ or npm add ../
- link to my-button
yarn link my-button or npm link my-button
- complete pod installation (if necessary)
cd ios
pod install
Solution 11 - React Native
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!