Whenever I run my RN-App via npx react-native run-android the fetch requests are working perfectly fine. However, once I create a release build via
npx react-native run-android --variant=release,
my App returns the error [TypeError: Network request failed] whenever I try to fetch anything.
My fetch method looks like this:
try{
const res = await fetch('http://192.168.1.10:4000/api/');
const json = await res.json();
}catch(err){
console.log(err)
}
As others mentioned in similar questions, I have already tried adding
<application ... android:usesCleartextTraffic="true">...</application>
to AndroidManifest.xml in android/app/src/main/
I also figured it might have something to do with Android apps not being allowed to run any requests without ssl in release mode, so I added a self signed SSL cert to my nodejs backend and tried again using https, without any success.
Any help is greatly appreciated since it's my first time doing this!
Try with network_security_config.xml file
create a file network_security_config.xml in res/xml folder and add this code in the file.
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">192.168.1.10</domain>
</domain-config>
</network-security-config>
then add this line in your AndroidManifest.xml file
<application
...
android:usesCleartextTraffic="true"
android:networkSecurityConfig="#xml/network_security_config"
... >
Hope this works for you!
As it turns out, the error lied in me not running the bundler when I changed something. Turns out you have to run it every time you make changes and want them to occur in the release build so I just ran the bundler with
npx 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
and then created the release build via
npx react-native run-android --variant=release
and now it runs perfectly fine.
Related
I have deployed a NextJs app on digitalocean droplet with Ubuntu 22.04.
"next": "12.2.3",
"react": "18.2.0",
I am getting this 404 error for _ssgManifest.js, _buildManifest.js and _next/static/chunks/pages/_app-83b8d0a73a58c453.js files.
enter image description here
I checked the build on server, files are present there, but in broweser they are showing 404. Another thing I noticed that the file _app-83b8d0a73a58c453.js getting fetched on browser but on server build it is with different name i.e. _app-8ba37a8edc5ef34c.js
What I Tried
I checked with and without custom dir for build, but it didn't worked
I checked with custom buildID too
const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
module.exports = {
async generateBuildId() {
return execSync(lastCommitCommand).toString().trim();
},
};
any help would be greatly appreciated
Solution:
These files were not matching to what is asked in browser request to what is available at build on server. In my case the reason was that, after build i was not restarting the application.
if you are using pm2 to serve your application named fe, please run:
pm2 restart fe
Then Hard refresh your website in browser, it will work.
If you are using other tool, then please follow docs for the same to restart the application. And if the issue is diffrent than this in your case, please share your solution here.
Thank you.
sometimes the console shows these errors on opening the website
GET https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js
[HTTP/3 404 Not Found 311ms]
GET https://example.com/subpath/_next/static/9ufj5kFJf/_ssgManifest.js
[HTTP/3 404 Not Found 334ms]
Loading failed for the <script> with source “https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js”. 1434-247:1:1
Loading failed for the <script> with source “https://example.com/subpath/_next/static/9ufj5kFJf/_ssgManifest.js”.
the app does use ISR and that seems to be working, it does get updated, what do these files do? what could happen if they are missing?
"react": "17.0.2"
"next": "10.1.3",
"node" "15.1.2"
I had the same problem with GCP (Kubernetes engine) with pods count > 1. I resolved the issue by restarting the deployment (all pods).
On that Github issue #Prabir linked to in a comment, someone posted a way to use the generateBuildId function within the Next.js config file:
const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
module.exports = {
async generateBuildId() {
return execSync(lastCommitCommand).toString().trim();
},
};
I work with an app that uses some combination of AWS CodeBuild and Docker images, which prevents direct access to all the git commands so that snippet above didn't work. But using CODEBUILD_BUILD_ID or really any environment variable (unique to either that commit or the build itself) did. I'm not as familiar with the GCP-equivalents but this Cloud Build Docs page makes it seem like $COMMIT_SHA would be a good option to try.
I have integrated existing android app in react native app. When I run using react native cli it opens the app and after clicking a button to open RN view it gives the error Unable to load script Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release (refer image)
If I manually create the index.android.js using command
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
and run the app, it works fine.
Also I can see bundle on this url
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false
Any idea what I am missing on?
I am running app in simulator and its not on flying mode.
Bundler opens like this but but on clicking RR, it says No apps connected (refer image)
After trying most of the options from this answer, no option worked. What worked for me is adding below code to <network-security-config> in network_security_config.xml file:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config xmlns:tools="http://schemas.android.com/tools">
<!-- This is only for debuggable versions of the App that use Charles Proxy
https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/ -->
<debug-overrides>
<trust-anchors>
<!-- Trust user added CAs while debuggable only -->
<certificates src="user" />
</trust-anchors>
</debug-overrides>
<base-config cleartextTrafficPermitted="false" />
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">127.0.0.1</domain>
<domain includeSubdomains="true">localhost</domain>
<domain includeSubdomains="true">10.0.2.2</domain>
<domain includeSubdomains="true">10.0.3.2</domain>
</domain-config>
</network-security-config>
I have created a new react native project by running "react-native init MyFirstProject". I have also installed node and have added no code of my own to any of the files.
I have tried to run the project to make sure it works by running "react-native run-ios --simulator="iPhone 8"". The command runs successfully but I am given the following error.
Could not connect to development server.
Ensure the following:
Node server is running and available on the same network - run 'npm start' from react-native root
Node server URL is correctly set in AppDelegate
WiFi is enabled and connected to the same network as the Node Server
URL: http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false
RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
Blockquote
GSEventRunModal
UIApplicationMain
main
start
How do I fix this error?
Try opening your project ios/MyFirstProject/MyFirstProject.xcworkspace and see if there's any build error.
I ran into this problem too, with the same error:
RCTFatal __28-[RCTCxxBridge handleError:]_block_invoke
It turned out that I had another server running on my local machine on the same port that the expo development client server was running (:8081), and that it was taking priority and then obviously giving the client a very different response to what it was expecting. Quitting the other server fixed the problem.
This is the output , knowing that i'm running it under a proxy , and i specified the proxy settings.
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080
then i run this command to create a new app in the specified folder "hello".
C:\>cordova create hello com.example.hello HelloWorld
Creating a new cordova project with name "HelloWorld" and id "com.example.hello"
at location "C:\hello"
Downloading cordova library for www...
this is the error :
Error: connect ETIMEDOUT
at errnoException (net.js:904:11)
at Object.afterConnect [as oncomplete] (net.js:895:19)
I recently had the same issue. I was maintaining an existing app and updating Cordova was well beyond the scope of the current task, so getting this working was really my only option.
Firstly, in order to eliminate all the errors and warnings about deprecated APIs when installing Cordova, I had to use some really ancient package managers. Using NVM I installed node 0.10.48 and npm 1.4.29. Cordova 3.6.3 then installed without any complaints.
But even creating an empty Cordova project wasn't possible as the below output shows:
Creating a new cordova project with name "HelloWorld" and id "com.example.hello" at location "~/Downloads"
Downloading cordova library for www...
Error: HTTP error 404 retrieving version 3.6.3 of cordova for www
at Request._callback (~/.nvm/v0.10.48/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/lazy_load.js:230:30)
at Request.self.callback (~/.nvm/v0.10.48/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/request/index.js:148:22)
at Request.emit (events.js:98:17)
at Request.<anonymous> (~/.nvm/v0.10.48/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/request/index.js:886:14)
at Request.emit (events.js:117:20)
at IncomingMessage.<anonymous> (~/.nvm/v0.10.48/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/request/index.js:837:12)
at IncomingMessage.emit (events.js:117:20)
at _stream_readable.js:944:16
at process._tickCallback (node.js:458:13)
Adding some extra debug output to lazy_load.js revealed that the CLI was looking for a directory at ~/.cordova/lib/www/cordova/3.6.3.
Since this was a brand new installation of Cordova, that directory obviously wasn't present so it went to download an archive from https://git-wip-us.apache.org/repos/asf?p=cordova-app-hello-world.git;a=snapshot;h=3.6.3;sf=tgz but the archive that used to be there has apparently been removed. I found it at https://github.com/apache/cordova-app-hello-world/releases/tag/3.6.3.
I download that archive and extracted it to ~/.cordova/lib/www/cordova/3.6.3, and I was then able to create my template app.
I know this thread is old but I really hope this helps someone. Working with Cordova is a bitch at the best of times, let alone when vital online components are removed like this.
On OSX Yosemite even with sudo the error persists.
after digging a little bit more. i found the solution.
I have just run the cmd.exe as administrator. after that worked like magic.
I ran into this problem by not installing cordova as admin. I had to sudo npm install -g cordova to get the create command to work.