I initialized a new react native project with Amplify.
npm install -g #aws-amplify/cli
amplify configure
npm install -g expo-cli
expo init RNAmplify
cd RNAmplify
amplify init
npm install aws-amplify aws-amplify-react-native #react-native-community/netinfo #react-native-async-storage/async-storage
import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)
And I keep getting this response when I reload the app.
The aws-amplify, aws-amplify-react-native are present in the node_modules directory.
Unable to resolve module ./aws-exports from C:\Users\Masi\IdeaProjects\RNAmplify\App.js:
None of these files exist:
* aws-exports(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* aws-exports\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
Look in folder "src"
What helped me was that I actually needed to run amplify init which creates an amplify folder for you after you answer a few questions.
I have a custom .npmrc file as follows
#foo:registry=https://gitlab.com/api/v4/packages/npm/
// This works and it returns the latest dist tag from the registry as configured in .npmrc
npm view --json #foo/my-package dist-tags
// This fails with a 404
npm access ls-collaborators #foo/my-package
// npm ERR! 404 Not Found - GET https://registry.npmjs.org/-/package/%40foo%2Fmy-package/collaborators?format=cli - Package not found
Some more context:
I am trying to publish an npm package to a private package registry on gitlab using the np module. These commands seem to be executing as part of one of its steps for user authentication.
What am I missing?
Make sure "private": true is in your package.json file. I was running into a similar problem as you, and adding this fixed it for me.
I have posted this here have created react-native app using
react-native init myapp
added web3 in package.json
npm install
react-native run-ios
but i am getting the error unable to resolve module crypto from web3-eth-accounts. Is there any way to fix this
unable to resolve crypto
Crypto is a node js module, when React Native is run - it uses Javascript Core. Crypto isn't include within this. When I installed crypto I used the following package:
https://www.npmjs.com/package/react-native-crypto
Instructions:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
rn-nodeify will create a shim.js in the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not require!
import './shim.js'
// ...the rest of your code
Import shim.js in your index.js file.
When you have done that crypto should be made available, if it still doesn't work I had to create a const in my App.js file like so:
export const cryp = require('crypto');
And import it into the components you need.
UPDATE
I've done a fresh build for this, I followed the below:
react-native init TestApp
Follow the instructions above for Crypto.
Linked:
react-native link
react-native run-ios
react-native-crypto don't work on recent react-native version 0.63.3 and react version 16.13.1, any more.
I used crypto-js package. The version is 3.1.9-1 in my react-native app. It's working well.
You can add below line in package.json file.
"crypto-js": "3.1.9-1",
crypto is a node's library that works with the browser however we can use it with react native with some hacks mentioned below follow these steps and boom! you are ready to rock.
npm i --save react-native-crypto
==> install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
==>install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
==> install node core shims and recursively hack package.json files
==> in ./node_modules to add/update the "browser"/"react-native" fieldwith relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
i had the same problem, it seems the crypto module is not supported by react native because when i install crytpo , it does not have an index.js file in the node_modules. so my problem came about when i was trying to use jsonwebtoken which uses crypto to encrypt data. so i uninstalled jsonwebtoken and switched to react-native-pure-jwt
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.
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 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.
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
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.
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.
You can use npm link using Metro. Just add the source folder of the linked package to watchFolders in your metro.config.js.
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.
Change your package.json
//...
"dependencies": {
//...
"my-button" : "file:../"
},
//...
I also came across this problem. After visiting the below link, I came to know that react- native does not support symlinks.[Click here][1]
However, I have solved this by adding these lines in the metro.config.js file. Please replace your_module_name with your module name.
const path = require('path');
const thirdPartyPath = path.resolve(__dirname + '/../your_module_name/'); // Path of your local module
const thirdParty= {
'your_module_name': thirdPartyPath,
};
const watchFolders = [ thirdPartyPath];
module.exports = {
// existing dependencies
resolver: {
thirdParty,
},
watchFolders
};
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.
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.
Could never get my own environment working using any other suggestions, but found a hack that works well (though not ideal) that can be easily set up in just a few lines of code and without changing your RN project configuration.
Use fs.watch for changes recursively in the directory where you're working on your library, and copy the updates over whenever there's been a change:
import fs from 'fs'
const srcDir = `./your-library-directory`
const destDir = `../your-destination-directory`
fs.watch("./src/", {recursive: true}, () => {
console.log('copying...')
fs.cp(srcDir, destDir, { overwrite: true, recursive: true }, function() {
console.log('copied')
})
})
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
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!
I'm working on implementing the twilio package into my react-native project and when I require it in my file the project wont load and I'm seeing the following error:
Unable to resolve module crypto from /Users/[myname]/Documents/Projects/React-Native/[app-name]/node_modules/twilio/lib/webhooks.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/crypto and its parent directories
I've tried installing the crypto package directly and that doesn't seem to work either.
Has anyone experienced this issue, and has a way to resolve it?
You can use the rn-nodeify module to get crypto on react-native.
Add rn-nodeify to your devDependencies in package.json:
"devDependencies": {
"rn-nodeify": "^6.0.1"
}
Add the following to the scripts section of the same file:
"scripts": {
…
"postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}
Be aware that rn-nodeify will modify your package.json.
More information available here: https://www.npmjs.com/package/rn-nodeify
I suggest you have a look there, plenty of solutions are given because none seem to fix for everyone.
I suggest you try the following (taken from the issue from the link) :
rm -rf node_modules
rm -fr $TMPDIR/react-*
watchman watch-del-all
npm cache clean && npm install
npm start from ./node_modules/react-native
But check out the issue in its integrality, many found other fixes that worked for them.
It seems that React Native doesn't accept certain packages based on their dependencies, Twilio being one of these.
While not a direct solution, I created a work around to this issue by creating a separate Express server to make the Twilio call, and calling that route from within my React Native app.
React Native packager uses Babel under the hood. This means that you can use babel-plugin-rewrite-require Babel plugin to rewrite all require('crypto') calls to require('crypto-browserify'), assuming that the latter is installed in your node_modules.
As of January 2016, you can use .babelrc file to define optional configuration, so this becomes really easy. First, install the dependencies:
npm install --save crypto-browserify
npm install --save-dev babel-plugin-rewrite-require
Then add plugins config to your .babelrc file:
{
"presets": ["react-native"],
"plugins": [
["babel-plugin-rewrite-require", {
aliases: {
crypto: 'crypto-browserify'
}
}]
]
}
Restart the packager and that should be it.
This is the same approach that ReactNativify uses, except that here we use .babelrc instead of defining custom transformer. When ReactNativify was written, it was not supported, so they had to go with more complex solution. See this file from ReactNativify for almost complete list of node polyfills.