I want to make sure that my native library works on 0.6x React Native. I've got a version of the library working on 0.59.x but when I run it on 0.6x I get the following json response (together with server 500):
Body:
{"originModulePath":"screens/custom-action-screen.js","targetModuleName":"NativeModules","message":"Unable to resolve module `NativeModules` from `screens/custom-action-screen.js`: NativeModules could not be found within the project.\n\nIf you are sure the module exists, try these steps:\n 1. Clear watchman watches: watchman watch-del-all\n 2. Delete node_modules: rm -rf node_modules and run yarn install\n 3. Reset Metro's cache: yarn start --reset-cache\n 4. Remove the cache: rm -rf /tmp/metro-*","errors":[{"description":"Unable to resolve module `NativeModules` from `screens/custom-action-screen.js`: NativeModules could not be found within the project.\n\nIf you are sure the module exists, try these steps:\n 1. Clear watchman watches: watchman watch-del-all\n 2. Delete node_modules: rm -rf node_modules and run yarn install\n 3. Reset Metro's cache: yarn start --reset-cache\n 4. Remove the cache: rm -rf /tmp/metro-*"}],"name":"Error","stack":"Error: Unable to resolve module `NativeModules` from `screens/custom-action-screen.js`: NativeModules could not be found within the project.\n\nIf you are sure the module exists, try these steps:\n 1. Clear watchman watches: watchman watch-del-all\n 2. Delete node_modules: rm -rf node_modules and run yarn install\n 3. Reset Metro's cache: yarn start --reset-cache\n 4. Remove the cache: rm -rf /tmp/metro-*\n at ModuleResolver.resolveDependency (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)\n at ResolutionRequest.resolveDependency (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)\n at DependencyGraph.resolveDependency (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)\n at Object.resolve (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/lib/transformHelpers.js:267:42)\n at /Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:426:31\n at Array.map (<anonymous>)\n at resolveDependencies (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:423:18)\n at /Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33\n at Generator.next (<anonymous>)\n at asyncGeneratorStep (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)"}
So my quetion is: How is it possible that the NativeModules were "visible" in previous version? All I did was upgrade the react native version and left all the code as it was.
It still works on 0.59.
absolute beginner in react native here,
I'm trying to follow the react native tutorial in here, and I get the following error when trying to run the second app version (v0.1.1).
I'm using expo to create the project, as suggested in the tutorial.
I tried deleting node_modules and re-installing the dependencies, I tried doing the steps suggested in the error.
I googled the error and tried the steps suggested here (removing babel-preset-expo from dependencies and re-installing them), but nothing helped.
Is this a version issue? I see that Ionicons.ttf does exist under node_modules\#expo\vector-icons, but in a different path, #expo/vector-icons/website/src/fonts
The development server returned response error code: 500
URL: http://192.168.1.102:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fyossiv%2Fgit%2Fqr-scanner%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js
Body: {"originModulePath":"/Users/yossiv/git/qr-scanner/App.js",
"targetModuleName":"#expo/vector-icons/fonts/Ionicons.ttf",
"message":"Unable to resolve module `#expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `#expo/vector-icons/fonts/Ionicons.ttf` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.","errors":[{"description":"Unable to resolve module `#expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `#expo/vector-icons/fonts/Ionicons.ttf` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`."}],"name":"Error","stack":"Error: Unable to resolve module `#expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `#expo/vector-icons/fonts/Ionicons.ttf` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (/Users/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
at ResolutionRequest.resolveDependency (/Users/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
at DependencyGraph.resolveDependency (/Users/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
at Object.resolve (/Users/yossiv/git/qr-scanner/node_modules/metro/src/lib/transformHelpers.js:180:25)
at dependencies.map.result (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
at /Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
at Generator.next (<anonymous>)
at step (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)"} processBundleResult
BundleDownloader.java:300 access$200
BundleDownloader.java:37 onChunkComplete
BundleDownloader.java:224 emitChunk
MultipartStreamReader.java:76 readAllParts
MultipartStreamReader.java:154 processMultipartResponse
BundleDownloader.java:208 access$100
BundleDownloader.java:37 onResponse
BundleDownloader.java:169 c
RealCall.java:135 run
NamedRunnable.java:32 runWorker
ThreadPoolExecutor.java:1133 run
ThreadPoolExecutor.java:607 run
Thread.java:761
you have to do npm install --save #expo/vector-icons
and change imports path #expo/vector-icons/fonts/... by the new route #expo/vector-icons/website/src/fonts/... in the files you call that font.
example
import IoniconsFont from '#expo/vector-icons/fonts/Ionicons.ttf';
by
import IoniconsFont from '#expo/vector-icons/website/src/fonts/Ionicons.ttf';
A conflict may occur due to module installation using the same icon.
npm install --save #expo/vector-icons
When creating a new react native project using the standard react-native init MyApp and running react-native run-ios for the first time I'm seeing the following error
error: bundling failed: Error: Unable to resolve module `#babel/runtime/helpers/interopRequireDefault` from `/Users/chrisedgington/Development/ReactNative/SixNationsPredictor/index.js`: Module `#babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
at ResolutionRequest.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
at DependencyGraph.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
at Object.resolve (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/lib/transformHelpers.js:180:25)
at dependencies.map.result (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
at /Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
at Generator.next (<anonymous>)
at step (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)
I've tried running the suggested but still see the same issue. I've seen a few posts about similar issues but nothing specifically seems to say how to resolve the problem in react-native.
macOS: 10.13.6
node: 8.11.3
react-native-cli: 2.0.1
react-native: 0.57.1
Have a go and try:
npm add #babel/runtime
Or upgrade babel runtime:
"#babel/runtime": "7.0.0-beta.55"
I tried all the things mentioned above, and, I found myself here again tonight.
Running from a nrwl mono repo, I had to cd into the app that was having the problem and run.
jest --clearCache
You should first quit the metro terminal before executing
npm add #babel/runtime
npm install
You should add and install babel for your projects
npm add #babel/runtime
npm install
If The error is not fixed, Try:
npm start --reset-cache
The issue for me was that #babel/runtime was installed as a dev-dependency instead of just a normal (non-dev) dependency
Try to update your npm version first
npm update -g npm#version or sudo npm -gf update npm#version
and then just add the babel runtime at your react native project
npm add #babel/runtime
Try upgrading your packages. You could have an old package causing the problem:
yarn upgrade-interactive --latest
Current error message suggests these steps to fix this:
Clear watchman watches: watchman watch-del-all
Delete node_modules: rm -rf node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
The last one solved it for me.
I had this problem today (April 2021), and I could solve it only by removing the webpack-node-externals package from my webpack configuration.
For me the solution was (Mac):
Stop IntelliJ
Enter terminal
Run: npx browserslist#latest --update-db -g
Run: npm cache verify
Start IntelliJ
If still not working:
Delete node_modules fron project if exists
Run: npm cache verify
Run npm install -f in project
Run: npx browserslist#latest --update-db -g
Problem:
I was in the middle of upgrading flow to typescript and I used #khanacademy/flow-to-ts to convert js files to ts. the lib not only changed the js files of the app but also it converted all js files in node_modules directory.
Solution:
I had to remove the node_modules and npm -i. This time when I checked the node_modules the interopRequireDefault.js file was there.
In case you are working with Yarn workspaces please note you are running react-native start from the right project...
Install latest Babel/runtime
=> install #babel/runtime
After that clean or reset the cache
=> npm start -- --reset-cache after
or
npm cache clean --force
I accidentally deleted my node_modules and package-lock.json. I used npm i to regenerate them and suddenly I was getting the above error. I solved it in two ways.
By uninstalling the app and using the following commands.
npx jest --clearCache
npm update
npm i
npx react-native run-android
By deleting the local repository and re-cloning it.
Hope this helps you.
I just uninstalled watchman. It worked for me.
brew uninstall watchman
Someone may find this helpful. I had the same problem while using turborepo and Expo.
Resolved it by adding 'node-linker=hoisted' to .npmrc.
Had this issue none of the above listed solutions worked for me, I had to go to node_modules/jest-haste-map/build/index.js
changed const crawl = canUseWatchman && this._options.useWatchman ? _watchman.default : _node.default;
to const crawl = canUseWatchman && this._options.useWatchman ? _node.default : _node.default;
error: bundling failed: "Unable to resolve module `ReactNative` from `C:\\AnchorDev\\Anchor\\node_modules\\react-native\\Libraries\\react-native\\react-native-implementation.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: `watchman watch-del-all`.\n 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n 3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."
This is the error that I received after upgrading React Native from 0.45.1 to 0.46.4. I ran npm i but I still get the error. How do I resolve it?
Try deleting node_modules folder and install packages again with npm install
When I install NativeBase and React-Native-Router-Flux in my react-native project I get this error:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
Error: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
at HasteMap._updateHasteMap (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:159:13)
at p.getName.then.name (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:134:31)
Solution was posted here
yarn add react-native-router-flux#3.38.0
You should be able to update
react-native-router-flux using:
npm i react-native-router-flux --save
It may be that trying to start the react-native packager fails again and running may be useful:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start --reset-cache`.
You may see once attempting to run the packager again errors such as:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name
You may need to run the npm install for react-native-router-flux again.
If you work with yarn, please run this command.
yarn add react-native-router-flux#3.38.0
And if you work with npm, please run this command.
npm install react-native-router-flux#3.38.0 --save
Also you still get the issue, please downgrade react-native version to 0.41.2.
Then, it will work.
NativeBase 2.1.4 solves this issue