Install local package as dependency with react-native - reactjs

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

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

$ yarn install leads to Cannot find module yarn-berry.js

New to react and am having trouble with the yarn install command where i get the following error:
Error: Cannot find module '/Users/MacPro/Desktop/Developer/React/.yarn/releases/yarn-berry.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)
at Function.Module._load (internal/modules/cjs/loader.js:898:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 code:'MODULE_NOT_FOUND', requireStack: []
Anything related to the yarn function returns this error. Have tried uninstalling and re-installing through homebrew but always results in this. npm install -g yarn says it is updated and installed as well.
Any help?
Also, it worked fine a few weeks ago.
Thank you in advance.
Ok so I guess like me you did not read the whole Yarn documentation.
To get out of this:
Remove the .yarnrc.yml file in your project
Configure again Yarn 2: yarn set version berry
Configure your .gitignore file according to Yarn documentation: https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
If like me, you do not want to commit 1000+ dependency files to your repository, add these lines to your .gitignore file:
.yarn/*
!.yarn/patches
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
.pnp.*
After that, your commit should contain:
the updated .yarnrc.yml file (or none if the file did not change)
the .yarn/releases/yarn-berry.js file (maybe it is named otherwise like yarn-berry.cjs, the important thing is that this file matches what is contained in your .yarnrc.yml file)
I think that you tried to update your version of Yarn to version 2 by vaguely following (as I did) the tutorial here :https://yarnpkg.com/getting-started/migration
Maybe you realised you did not like Yarn 2 (no node_modules folder anymore... seriously Yarn?), uninstalled it, deleted different files manually, and now end up with this error (at least it was my case).
You are now trying to make a clean install of Yarn 1 because you still prefer it to npm (as I do) and you end up getting those crazy errors telling Yarn is looking form something mentioning some Berry thing you can't find, this error :
node:internal/modules/cjs/loader:928
throw err;
^
Error: Cannot find module '/Users/Username/.yarn/releases/yarn-berry.cjs'
You have to first make a complete uninstall of Yarn.
Based on what you used to install it :
npm uninstall -g yarn
or
brew uninstall yarn
Then, and this is the most important part, go to your Home folder (on Mac Only) and list the hidden folders with
ls -al
You will have two elements mentioning yarn :
.yarnrc.yml and .yarnrc
Type the following to remove them:
rm -rf .yarnrc
and
rm -rf .yarnrc.yml
Once done, go and make a brand new install of Yarn using npm or brew :
npm install - g yarn
or
brew install yarn
That should be it.
RU sure you have yarn installed globally? Try npm install yarn -g. If you are a Windows user just download yarn from its website named .msi file.
After you run yarn set version stable and you add nodeLinker: node-modules to the .yarnrc.yml file, you need to run yarn install again.
Then all the modules where found.

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.

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

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>

Import package from npm to react native

I want to import this npm package from npm but it returns error
I have init new project and done this
npm install #google/maps --save
var googleMapsClient = require('#google/maps')
Error is this
this is error log
error: bundling: UnableToResolveError: Unable to resolve module `url` from `/Users/barron9/Downloads/meteor/node_modules/#google/maps/lib/internal/make-api-call.js`: Module does not exist in the module map or in these directories:
/Users/barron9/Downloads/meteor/node_modules
, /Users/barron9/Downloads/node_modules
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 packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
at ResolutionRequest._resolveNodeDependency (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:394:11)
at ResolutionRequest.resolveDependency (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:141:29)
at dependencyNames.map.name (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:145:59)
at Array.map (native)
at ResolutionRequest.resolveModuleDependencies (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:145:42)
at Promise.resolve.then (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:169:21)
at process._tickCallback (internal/process/next_tick.js:109:7)
Bundling `index.android.js` 94.3% (405/417), failed.
error: bundling: UnableToResolveError: Unable to resolve module `url` from `/Users/barron9/Downloads/meteor/node_modules/#google/maps/lib/internal/make-api-call.js`: Module does not exist in the module map or in these directories:
/Users/barron9/Downloads/meteor/node_modules
, /Users/barron9/Downloads/node_modules
Please try:
import googleMapsClient from '#google/maps';
Otherwise, that package does not target React-Native, I think.
Would you consider using the correct package for react-native, which works well in my react-native project:
https://github.com/airbnb/react-native-maps

Resources