Unhandled JS Exception: Requiring unknown module "104" - reactjs

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.

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

npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/react-is (over 30000ms)

When I want to create a react app I'm encountering the following error:
npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/react-is (over 30000ms)
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\info\AppData\Roaming\npm-cache\_logs\2020-04-23T02_54_45_865Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting app2/ from C:\Users\info
Done.
Sounds like you have a slow connection. Try increasing the timeout from 30s to 60s by adding this to your .npmrc file:
timeout=60000
You could also try adding
prefer-offline=true
if you are trying to save bandwidth or have a slow connection
Note: if you don't have an .npmrc file setup yet, you can create one here
for Windows: C:\Users\{username}\.npmrc
for Mac/Linux ~/.npmrc
Or you can create one in the same directory as your project's package.json file.
I had a slow connection and I updated the timeout value to .npmrc using:
npm set timeout=100000
And to check if the value is updated (Mac): vi ~/.npmrc
Users are extremely likely to face this issue if they are on a slow internet connection. To counter this, you need to increase the timeout in the npm's config file. And here's how to do it:
Find the .npmrc file (located in the nodejs installation folder; in my case, it's in F:\Installations\nodejs\node_modules\npm folder. But for you, it might be in C:\program files folder).
Open the .npmrc file and append this line: timeout=240000 (usually it is 60 seconds I suppose, but since my connection was way slower therefore, I had to increase it to 240 seconds or 4 minutes, you can keep it 120000 for 120seconds)
Save the file
Since create-react-app fails midway, it can easily break npm's package.json file thus leading to this sort of issue:
Unexpected end of JSON input while parsing near
Therefore, before running the npx create-react-app, run the following command: npm cache clean --force as it cleans the cache and (i think) repairs the package.json file.
I was facing the same issue. I Solved it like this:
create a new file with no name just an extinction of .npmrc
open this file in any editor and type timeout = 90000
save the file and in you terminal type
npm cache clean --force
npm install create-react-app
npx create-react-app ./
Note: this error occurs because of slow internet speed
This error occurs due to slow internet connection. Try installing when you get a better speed. If better speed doesn't solve your problem try this.
npm cache verify
npm cache clean --force
I enabled IIS and the issue was solved for me:
do to Control Panel -> Programs -> Programs and Features
click on Turn Windows features on and off
make sure the Internet Information Services is checked
click OK and wait for some minutes
I was facing the same issue when create a react-app using npx create-react app . And i fixed my problem by running the following command.
npm cache clean --force
I hope you find this helpful
I fixed the problem by setting timeout in user local .npmrc file to
timeout=600000
90000 is not enough for downloading many packages for projects with lot dependencies in package.json
In case you are still running into this issue below with the error:
Invalid response body while trying to fetch
https://registry.npmjs.org/eslint-config-react-app: Socket timeout
Run this script: npm install react --registry=https://registry.npmjs.org
and then npx create-react-app mypp
for your react app installation. Happy coding
I fixed the problem by running:
npm config set registry "http://registry.npmjs.org" --global
It appears the problem is related to the following post:
npm install gets stuck at fetchMetadata
And #CptUnlucky's solution worked for me on macOS Catalina 10.15.7, node v16.0.0, npm v7.12.2, nvm v0.38.0
I was facing the same issue and I solved it by enabling the Internet Information service (IIS) feature of the window.
Enabling the IIS
Steps:
Windown + r
Type appwiz.cpl and click OK
click on Turn window features on or off (on the Left top side)
wait some seconds and check the Internet information service option
Now wait until window apply changes.
create project again.
I have faced the same issue. I tried all solutions over StackOverflow or Github discussions but nothing worked.
I changed the .npmrc file under the Users folder in C in Windows and changed the timeout from 30000 to 90000. See if 60000 works!
In my case it was the issue related to npm verison 6.14*
Downgrading to npm verison 6.13.7 solved for me
npm i -g npm#6.13.7
It's also an newly opened issue
you can check more details about it at
https://github.com/npm/cli/issues/1185
You just need to run npm i npm#6.13.7 or npm I -g npm#6.13.7 if you wanna this to be global version.
After that, just to make sure, run " npm -version " to see what version you are using.
Downgrading to npm version 6.13.7 worked for me.
Try this:
npm cache clean --force
npm config rm proxy
npm config rm https-proxy
And remove your node_modules within your user.
In Windows, it is
C:\Users\${select_your_user}\AppData\Roaming\npm\node_modules
I was facing the same issue when running npm install on Docker.
I had to pass the HTTP and HTTPS proxy values to the image while building it.
docker build --build-arg HTTP_PROXY=http://<your_company_proxy> --build-arg HTTPS_PROXY=http://<your_company_proxy>
It worked fine after I passed these parameters.
In my case it was the issue related to npm verison 6.14*
Downgrading to npm verison 6.13.7 solved for me
npm i -g npm#6.13.7
It's also an newly opened issue you can check more details about it at https://github.com/npm/cli/issues/1185
it is works for me
Editing the .npmrc file to 80000 works. If not, globally uninstall create-react-app:
"npm uninstall -g create-react-app" then run "npx create-react-app ./"
I recently have the same issue and following steps would help you.
npm config set registry "http://registry.npmjs.org" --global (sets registry) (Try Again)
Go to you user folder find .npmrc file there and remove content of it.
run npm cache clean --force
still errors - Remove the content of npm base folder usually inside User/AppData/roaming/npm/...
I tried everything including factory resetting my Mac. Then after reinstalling everything and still having the same issue, I typed into the terminal and ran:
npm set timeout=100000
then sat my computer next to my router and ran npx create-react-app again and it worked!
Sometimes it won't work if you use only letters in your app name e.g first I have used "myapp" and that was not working though I have done all the other stuffs correctly like set timeout = 240000 in .npmrc file and run the following commands
npm cache clean --force
npm install create-react-app
npx create-react-app myapp
but that not working for me then I have just changed my project name from myapp -> my-app and it worked perfectly. So, If you are facing the same issue try them out. Hopefully, it saves your time.
I tried many things for 3 days, then i figure out that new versions of nodejs doesn't work so fine for some computers, i downgrade to 16.0.0 and then worked
Regarding npx ...
If you have create-react-app (CRA) globally installed;
it is recommend you uninstall CRA
to ensure that npx always uses the latest version.
When using npx, the global installation isn't used.
But it may interfere (addressed below).
Don't run your React app from your desktop.
Some operating systems may throw an error.
Windows OS users ...
As administrator (for steps #1 & #2), inside your command-line ...
1) uninstall your global version of CRA.
npm uninstall -g create-react-app Mac prefix: sudo
2) Then ...
Run: npx create-react-app my-app Mac prefix: sudo
Above: This will create the latest version of
a React app named: my-app.
This app will be created wherever your command-line is pointing.
3) Open Google Chrome.
4) cd my-app (point your command-line to your project folder).
5) inside your command-line ... Run: npm start

Create-React-App Unexpected Connection Refused

I keep getting the below error when I try to simply create a new react app. I even set up fiddler on my computer and set my proxy to work with that but I am still getting the following error:
ECONNREFUSED 13.107.6.183:443
Click here for the complete log
$ create-react-app testmeup
Creating a new React app in C:\***\source\Dev\testmeup.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
yarn add v1.15.2
[1/4] Resolving packages...
error An unexpected error occurred: "https://pkgs.dev.azure.com/AdmInvestorServices/_packaging/test/npm/registry/react: connect ECONNREFUSED 13.107.6.183:443".
info If you think this is a bug, please open a bug report with the information provided in "C:\\****\\source\\Dev\\testmeup\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Aborting installation.
yarnpkg add --exact react react-dom react-scripts --cwd C:\Users\***\Dev\testmeup has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.
This appears to be an issue with your proxy settings since when you're running create-react-app <app_name> yarn is unable to resolve the necessary dependencies to set up your new react project, namely: react, react-dom, and react-scripts.
Maybe you could try setting your proxy settings so you can install the necessary libraries create-react-app needs. According to yarn's documentation:
"For backward compatiibilty with npm, Yarn allows passing down npm configuration via environment variables."
So maybe you could try the following and seeing if this helps resolve your issue:
npm config set proxy <proxy_url>
npm config set https-proxy <proxy_url>
where the <proxy_url> is changed to work with your appropriate proxy. Then you can tell yarn to ignore ssl if necessary. Note: Use at your own discretion.
yarn config set strict-ssl false
npm config set <key> <value> sets npm environment variables which yarn can also utilize. In this particular case we are setting the proxy environment variables. Now simply try running the create-react-app command again and it should be able to proceed with setting up the new react project for you.
Hopefully that helps!

Module HMRClient is not a registered callable module (calling enable) in Linux

First When I created the app with react-native init project1 .
I was getting an error as below
Unable to load script from assets index.android.bundle on windows
Later I solved this issue by running following commands Stackoverflow link
mkdir android/app/src/main/assets
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
react-native run-android
But later I am getting an error like this and not able to solve, Module HMRClient is not a registered callable module (calling enable)
This is the common occurred problem, but there will not be some problem in bundling the app, Just follow some common steps and it worked for me.
Delete node_module folder and install npm
rm -rf node_modules && npm install
cd android && ./gradlew clean
then cd .. && react-native run-android
If you're developing a native module and your npm link'd folder contains a node_modules directory, this can also produce the error.
To correct for this case, you can delete the node_modules directory, re-install your project in the linked folder and use react-native start --reset-cache.
Disable hot reloading, it will work fine
This issue occurs if we enabled the production mode from dev setting by unchecking "JS Dev Mode" and then try to enable the hot reload.
Enable JS Dev Mode again will work.

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>

Resources