Network calls failing instantly in React Native Windows project - react-native

first off apologies if I've forgotten to include anything, new here! I am having a pretty odd issue using react-native-windows version 0.63.0-0 with react-native version 0.63.2. The problem is that network calls made from my windows laptop appear as if they are not attempting to execute... period. They fail instantaneously and simply return a TypeError.
TypeError: Network request failed
This happens to me on a completely fresh init of RN/RNW, and I've tested with a couple http libraries and variations of calls, such as swapping in axios for fetch all using the same then and catch logic (excluded on some examples below for brevity's sake). I have tried and failed to reach several different domains. The API I'm attempting to reach is available (tested successfully with postman). Other standard React-Native projects work just fine from my laptop. I've cleared metro, run --reset-cache, removed tmp, reinstalled node-modules, everything standard you're supposed to try to troubleshoot like that.
fetch('https://subdomain.domain.com/<api-path>', { // my example then & catch
method: "GET",
headers: { "Content-Type": "application/json" }
})
.then(response => response.json())
.then(responseData => console.log(responseData))
.catch(error => console.log(error));
fetch('https://subdomain.domain.com/<api-path>'); // without headers this time, used same then & catch block
axios.get('https://subdomain.domain.com/<api-path>'); // again used same then & catch
// ... and so on, triggering the catch block instantly, as if it fails without trying
I do also see the following error in my debugger console, even though I can see the debuggerWorker from within my 'chrome dev tools -> sources -> page' panel which from what I understand, the error just has to do with chrome not handling source maps correctly, feel free to correct me there. However I'm unsure whether they are even related or if this one is just a fluke:
Error: Unable to resolve module `./debugger-ui/debuggerWorker.cff11639.js` from ``: ./debugger-ui/debuggerWorker.cff11639.js could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
at ModuleResolver.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15)
at ResolutionRequest.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
at C:\Users\...\node_modules\metro\src\lib\transformHelpers.js:267:42
at Server.<anonymous> (C:\Users\...\node_modules\metro\src\Server.js:841:41)
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\Users\...\node_modules\metro\src\Server.js:99:24)
at _next (C:\Users\...\node_modules\metro\src\Server.js:119:9)
Generally I'll run npx react-native run-windows (or npx react-native start --reset-cache separately first) to execute the project, but debugging from VS Code's debug pane, as well as running from Visual Studio produce the same errors.
Is there something I am missing with my react native windows setup? I have followed the windows setup step by step several times and even simply adding an http request to execute from their default app instantly fails... This has blocked me for a while and it really feels like an environment setup issue, but I'm not sure what else I would check in Visual Studio/my configs in order to resolve this.

After some more continuously banging my head against this issue, I continued to dig a little further into Visual Studio's side. I went file by file looking for anything remotely related to what might be blocking this functionality. As I expected, it was an unfortunately simple solution to something that caused me a significant headache since I wasn't aware of it and could not find it anywhere else, so let this be a lesson to those after me who have network problems with React-Native-Windows:
Whenever you are beginning - or picking up - a RNW project that uses the network to send or retrieve information, make sure that you have first gone into Visual Studio (not VScode) and enabled the "Private Networks (Client & Server)" option. You can find this if you open your project in Visual Studio, and it's under
Project Solution -> 'Package.appxmanifest' file -> 'Capabilities' section
This should hopefully cause your network requests to succeed as you would expect from now on.

Related

GLOBAL_AGENT.HTTP_PROXY not letting me build Electron Pacakge

the problem
npm init -y
npm i path electron request http
npx electron-packager . --arch=ia32 --platform=win32 --out=release --electron-version=13.1.9
to build an electron project found in the current directory. Previous to reformatting my OS, I never had issues with this. However, now every time I execute these commands, after the last one electron-packager.
the error
In the console, I see Unsupported GLOBAL_AGENT.HTTP_PROXY configuration value: URL protocol must be "http:"
I cannot find any help on Google, or Stackoverflow about why this is occurring.
what i tried
I tried commenting out all parts of code in my relatively small project, to try to figure out what is giving me this issue.
I also tried repackaging the same project on my MacOS & Windows 10/11 machines, nothing works.
I am really frustrated/confused as to why this is happening, especially since I was able to use electron-packager a while back on the exact same project with no issues.
project dependencies
http#0.0.1-security
electron#17.1.2
request#2.88.2
path#0.12.7
Actually this is a bug, has been fixed 5 hours ago (Mar 14, 2022, 9:55 PM GMT)
GLOBAL_AGENT.HTTP_PROXY configuration value: URL protocol must be http
Just do:
npm update

“Page Not Found” when navigating to site created with Gridsome & deployed on Netlify

I've created a new site using Gridsome deployed with Netlify, but I can't get the site to appear when accessed. Instead, Netlify says:
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
< Back to our site
I tried updating my build settings based on the instructions of the creator of the Gridsome starter template I'm using, but the site still doesn't display. I've also updated the js-yaml version.
I've gone through the questions/answers for similar questions on here, but I haven't been able to figure this out. I'm new to web development, and I'm sure I'm missing one or more things contributing to the issue.
My GitHub repo for this site.
The site.
I have the build log from Netlify. There are some errors in it. I don't want to put too much here, so here's a part from the end of the log.
12:18:36 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
12:18:36 PM: Error running command: Build script returned non-zero exit code: 1
12:18:36 PM: Failing build: Failed to build site
12:18:36 PM: Finished processing build request in 55.729813394s
A Gist for the whole build log.
Thanks so much for your help, #talves!
I was having trouble using the build commands because of being new to cli stuff and a permissions issue. I asked a friend about the build errors I was getting from Netlify, and he recommended I try removing and re-installing my node modules. Did that, still didn't work. I tried removing anything in the repo having to do with "journal" since Failed to render /journal kept appearing in the build log, but that didn't work either.
I googled ReferenceError: _objectSpread is not defined after update since that was in the build log after the journal error. I found a comment on an issue noting the same error message in the main Babel GitHub repo that suggested adding the following to the package.json file:
"resolutions": {
"#babel/core": "^7.5.4"
}
I added it, tried to build again, and it still failed but only gave me one error message it didn't show before—Error: SyntaxError: Unexpected string in JSON at position. I googled that message and got another issue on GitHub. A comment on the issue noted a missing comma.
I went back to my package.json file and found that I didn't add a comma to the bracket above the new "resolutions" snippet. I added the comma, tried to build again, and it worked 🤜💥✨ !
Sorry if this is long-winded! I thought it might be good to include my process on figuring this out in case others run into the same issues.

Error on running react-native run-android: "Unable to load script"

I did a first project on react-native, that still works when I want to emulate it on my AVD.
I started a react-native init new project that installed correctly but impossible to run it the first time, Node JS command open and shut down in a seconde. And, come to this point :
"Starting: Intent { cmp=com.ms/.MainActivity }"
Nothing happens : the following line is this one : PS C:\Users\arthu\MS>
And I get the error message : "Unable to load script. Make sure you either running a metro server (run react-native' start) or that your bundle 'index.android.bundle' is packaged correctly for release.
Thought it was due to the Node JS console, which was opening a few second, so I emptied its cache, didn't change anything, Re-installing Node JS, re-tried with my ancient project (which works), change port from where I run the project, nothing changed.
I guess it is not linked with Node JS, neither my code (because I didn't even start), but I am a bit confused about that, and didn't find a similar post ! Thank you for your answers ;)

How to install flow type correctly for react native#0.46+?

I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.
There was flow installation guide from react-native#0.22 document, but it's gone in react-native#0.46.
However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.
What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.
I just finished covering half of our project by flow and we use RN 0.44.0.
The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.
Anyway, I disable the error in node_modules, and here is my .flowconfig:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]
[libs]
./flowLibs.js
.....
[lints]
[options]
You should install flow first if you not setup correctly,
npm install --save-dev flow-bin
and also run this in you project root after install:
npm run flow init
If npm run flow init does not work, just add "flow": "flow" in npm scripts.
After init, put my .flowconfig in your project .flowconfig file.
Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found
Write down code in flowLibs.js:
declare module 'Module_Name' { declare var exports: any; };
After that, you should be good to go with you project now.
BTW, don't forget add //#flow on the top of the file which you want to check type.
I found flowtype is built in with react-native#0.46+.
For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes#flow, it won't work without flow-bin, they should mention that too.
To make flowtype of best use, I use it with Visual Studio Code.
Steps:
Install flow-bin globally, by npm i flow-bin -g.
Make sure your terminal is responsive to command flow.
Install vscode flow extension.
Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place.
To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.
then you have flowtype installed with visual result with every key stroke:
Try this one:
Adding Flow to React Native
https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809
Hope this helps!

react-native init hangs/stalls with no error

New to react, working through a udemy tutorial on a Mac. Installed node ok but when I go to start a project
react-native init projectname
terminal output:
This will walk you through creating a new React Native project in /Users/myuserid/projects/projectname
Installing react-native package from npm...
and it just "hangs" there... seemingly frozen or chugging along. When I check Monitor it looks like Terminal is using 0% CPU. There is no indication (backslash flipping or otherwise) that it is processing.
Inside the projectname directory is a "package.json" file and a "node_modules" file with a bunch of subfiles.
I saw this post with a similar problem (https://github.com/facebook/react-native/issues/2806), but doesn't look like there is a remedy. Is there any way to speed this up? How can I tell if it has stalled forever? Will this happen during every project init I do?
I'm not in China... I have fast internet... and I'm using NPM 3.3.12
Thank you!
I got the same issue , and i found the 1st comment on the question is useful .
Indeed , If no error, it means that it takes time to download dependencies.
You can track downloading by adding --verbose :
react-native init projectname --verbose
You will spend a long period to reach 50% of downloading.
Nevertheless, you might face the following error :
npm WARN react-native#0.34.0 requires a peer of react#~15.3.1 but none
was installed. npm verb exit [ 0, true ]
If so , check this thread .
I had the same problem while using an existing (empty) directory as App name
It worked as soon as I changed the App name to something new