React Native issue: Module does not exist in the Haste module map - reactjs

I created a native module and created another project to test it locally.
Here are my steps:
cd <Testing project>
npm install ../<Module project>
react-native link <module name>
react-native run-android
Then I got following error:
error: bundling failed: Error: Unable to resolve module `react-native-helloworld` from `G:\Test\App.js`: Module `react-native-helloworld` 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-*`.
I've searched StackOverflow for the issue, but there's no workable solution. The suggested solution 'clear the cache and reset everything' cannot work.
However, the module can work if I publish it to https://www.npmjs.com/ and then install it via npm install <module name>.
The only difference is the installing way.

I got a similar error complaining about how it could not find 'path' from where ever it was looking for. In the end I figured out that the issue was completely unrelated.The following auto import was accidentally added to my code (probably when I was creating a style using 'textTransform')
import { transform } from "#babel/core";
Once I noticed that and removed it, the project was buildable. It might help to check recent changes in your code to see if something similar got added.

Chances are that you're accidentaly symlinking your library inside node_modules when you use npm, instead of using npm you can use yarn
yarn add file:../<module_project>

Related

Invariant Violation: no callback found with cbID for module<unknown>

I have created yarn package with common components, services, utils, etc. for my project. Then I have created index.ts file in src folder, where I've exported all components. Then I've built the package, added to my project. Then if I import a component from the package after starting the app in a real device or in an emulator, it's all OK. But if I import component first and then start app with react-native run-android (or -ios), I get a lot of errors Invariant Violation: no callback found with cbID for module<unknown> in loop:
What am I doing wrong?
Just fixed it. You need to make sure the react-native version is compatible with the react-native version of your dependencies.
For example: your project: react-native: 0.65, but your dependency: 0.64. You will get this error.
In my case this was due to a mismatch between the JS react-native version and the native version.
Near the top of the logs was the message below. Running watchman watch-del-all && react-native start --reset-cache as suggested in the log message fixed the issue.
2021-12-13 12:09:04.781041-0800 example[32395:987769] [javascript] React Native version mismatch.
JavaScript version: 0.63.4
Native version: 0.66.4
Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with `watchman watch-del-all && react-native start --reset-cache`.
2021-12-13 12:09:04.856943-0800 example[32395:987769] [javascript] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
2021-12-13 12:09:04.859616-0800 example[32395:987758] [connection] nw_socket_handle_socket_event [C6.1:1] Socket SO_ERROR [61: Connection refused]
Remove node_modules and try again. It resolved the issue for me
rm -rf node_modules
npm install --save
I looked into this answer here, and found that this actually works for RN navigation 6 I fixed it in my yarn workspace configuration as per the answer. In my package.json I added at the end.
Then I deleted the node_modules folder
And then rebuild the project and the error was gone.
"nohoist": [ "**/*/**" ]
yep, faced the same issue and resolved it with changing peerDependencies in my library. what i did:
in the library directory:
in package.json changed peerDependencies versions to *
npm publish
in the project directory:
rm -Rf node_modules && yarn install
yarn add your-package-name
now everything works like a charm

Unhandled JS Exception: Requiring unknown module "104"

I have installed React Native Highcharts but while importing the module:
import HighchartsReactNative from '#highcharts/highcharts-react-native';
Getting error Unhandled JS Exception: Requiring unknown module "104". If you are sure the module exists, try restarting Metro. You may also want ti run 'Yarn' or 'npm install' importing the module I got the above error.
I have already restarted the Metro bundler and restarted many times but did not worked.
Ensure the module is installed by checking the folder node_modules/#highcharts/highcharts-react-native
If it is missing, install it with yarn add #highcharts/highcharts-react-native or npm install --save #highcharts/highcharts-react-native
Clear metro cache with watchman watch-del-all and rm -rf $TMPDIR/metro-bundler-cache-*
Restart the bundler resetting the cache with yarn start --reset-cache or npm run start --reset-cache
Reload the bundle in your app (shake and press Restart on the menu)
You could try to clear Metro cache. Please take a look to this gist.
Hope this helps.

Execution failed for task ':app:bundleDevReleaseJsAndAssets'

When I run my Jenkins build for my React Native project it fails with the following errors:
Unable to resolve module `reactotron-core-client` from `/Users/nfib/Jenkins/Jenkins-Workspaces/ENGA/ENGAL/node_modules/reactotron-redux/dist/index.js`: Module does not exist in the module map
Execution failed for task ':app:bundleDevReleaseJsAndAssets'.
I followed the recommended rm -rf node_modules && npm install but I am not exactly sure that this would help since it seems to me like its a generic solution from the npm team.
React-Native version: 0.53.3 with "reactotron-react-native": "3.5.0", "reactotron-redux": "3.1.0",
Has anyone had similar issues to this? How can I ensure this does not continue to happen?
The issue is your Jenkins build server is unable to locate the reactotron-core-client module which is necessary to complete your Jenkins build. You can see this from your stack trace:
Unable to resolve module reactotron-core-client
The recommended solution from the npm team of:
rm -rf node_modules && npm install
is a generic solution because this command will remove your previous node_modules directory containing your project's dependencies and then reinstall the listed dependencies within in your project's package.json file. This may resolve issues stemming from your lock file as well as versioning issues if npm has been updated on your build server.
This solution may resolve your issue if all of your project's required libraries are listed within your package.json file. However, if the reactotron-core-client library isn't listed as a required dependency within your package.json file this problem will persist moving forward. Perhaps you could try the following:
npm i --save reactotron-core-client
as this will save and install the reactotron-core-client dependency for your project. By save I mean list this library as dependency within your package.json file.
Ideally, moving forward your best bet is to keep your package.json file up-to-date with your project's dependencies as well as installing dependencies prior to attempting a Jenkins build.
Hopefully that helps!

React-Native: Error: Unable to resolve module `SegmentedControlIOS`

I am getting a wried error when I updated to xCode10. The error said that
error: bundling failed: Error: Unable to resolve module `SegmentedControlIOS` from `/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the 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-*`.
I am using below version of react ana babel:
"babel-preset-react-native": "4.0.0",
"react-native": "0.54.0",
I tried to reinstall the node module. But it didn't work.
Let me know if anyone have the same issue and able to sort it out.
Thanks,
Reset caches
as usual
it works everytime like a charm.
Were you able to get this to work? If not, try starting the metro bundler on a separate terminal first (npm start on your project). This sounds like what I was getting. If you try to do npm start ios without running the metro bundler first, the working directory is set in node_modules which is why it won't find any of your files.

Install local package as dependency with react-native

I am trying to use a package from a relative path and I have done npm install ../../ExamplePackage and react-native install ../../ExamplePackage. These packages are relative by multiple levels and not just one.
I am getting the following errors
error: bundling failed: Error: Unable to resolve module `ExamplePackage` from `/Users/vikasagr/workspace/test/ReactNative/MyPackage/src/index.js`: Module `ExamplePackage` 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/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:161:1460)
at ResolutionRequest.resolveDependency (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:91:16)
at DependencyGraph.resolveDependency (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map (<anonymous>)
at resolveDependencies (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next (<anonymous>)
at step (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
I tried all the steps but nothing worked. I also tried haul but that wasn't also working for me.
Symlinks were probably causing your problem. npm install with a local path installs libraries in node_modules with a symlink pointing to the local path of the package. Unfortunately this causes an issue with the react native metro bundler (" does not exist in the Haste module map").
I had the same issue with npm install. react-native install works for me, and that does not create symlinks.
Using wml is another good approach. It replicates the behavior of a symlink by automatically copying changes between your local library and its installed copy in node_modules.
See https://github.com/facebook/react-native/issues/23327 for a similar issue.
You can try WML.
https://www.npmjs.com/package/wml
What it does:
replaces npm link with something that actually works!
It worked for me !
Cheers

Resources