VS Code Remote WSL loses connection to project running on localhost - reactjs

I'm using VSCode with WSL. With the Remote WSL extension I'm opening my project in VSCode. I'm running my project (it's a react project) in WSL. First I can connect to my application on localhost:3000 but after a while my browser says that it couldn't connect to it. My project is running fine without errors. I've tried it with Chrome, Edge and Firefox (with and without extensions). Same thing. After a while it loses connection. If I run the project on my local windows it works fine. It used to work with WSL too just a few days before.
Brower connection error
My project running without issues
I've tried updating all of the WSL packages and reinstalling all of my VSCode extensions but it didn't help. Any idea what's causing this issue and how to solve it?

Related

Fresh ReactJS project stuck at starting the development server

I am running a fresh react project with no single line of code written by me.
All I did was:
npx create-react-app my-app
npm install
npm start
The browser window opens and within my console window I see "Starting the development server". It is stuck there, have been keeping it up for over an hour with no progress.
I looked at different SO threads as well as many suggestions on other platforms. From limiting the RAM available to using another port, closing all browser windows, rebooting my machine - nothing helped.
Do you have any suggestions for troubleshooting?
Running on macOS 13.1 on M1 Pro.
It was the directory I started the project in. Using spaces and several special characters seems to break react as well es next.js which I tried next.

React npm start works but dev server not

Since this morning I can't launch any React JS Project in my dev server.
I explain. When I launch npm start command, all works fine, no any error message, all works as usual, it opens me a tab in my browser, but it loads forever and I just have a blank page loading.
For information, I works on a Windows System, with WSL Debian distro.
I tried to open it with http://localhost:3000, http://127.0.0.1:3000 and with my local IP adress (that's an exemple) http://192.168.0.1:3000, I also changed browser (Chrome / Edge ), and every thing is the same.
After that I launch with npm start an Express project -> it works like a charm.
I also tried with a Symfony project, here with the PHP dev server php -S 0.0.0.0:8000 -t public and same as Express, it displays normaly in my browser.
So I'm pretty sure there is something with React, but that's on all mys REact projects, not with one particulary, and again, there is no error in my console, output is like everyday, so that's very strange and I really don't get it!
If someone has any idea 🙏

React app working in windows but not on Ubuntu

I have a react app which is working perfectly fine on windows but it is not working on my live ubuntu server. I get the following console msgs in chrome when I try to visit the page.
I am not able to figure out what is the issue here. I re-run npm install and checked code. Code is running fine on windowns but not on ubuntu server.
I get the following error in ubuntu command prompt:
It was the problem with the file "bin - Copy.png"
script was looking for "bin - copy.png" whereas the file name was "bin - Copy.png"
I edited the file name and everything worked well.

React Native Tools in VS Code. Nothing in Debug Console

I have installed VS Code on a fresh load on Ubuntu. Im trying to start a new react native project with Expo and I want to be able to debug in VS Code using the React Native Tools extension. I had it set up on my laptop with ubuntu and it worked ok. Now running it on my PC when I click on Start Debug it runs for about 2 seconds and stops. Absolutely nothing shows up in the Debug console. Running Node 14.4.0. Deleted everything and ran expo init a couple times: no change. Anyone encounter anything like this before?

Error: $compile:tplrt: Cannot render page after compiling AngularJS with WebStorm on Windows

I am currently pretty lost where to start searching for the error that I am facing. The same AngularJS project that my colleagues have been working on for quite a while on Macs cannot be compiled correctly on my Windows machine. No idea if windows and mac has anything to do with the error but just in case I am adding this information.
I've checked out the project with SourceTree and opend it with WebStorm.
First npm install then gulp dev in the terminal of WebStorm and my angularJs-project is beeing compiled without any errors. When then the browser windows with //localhost is beeing opened, the page shows shortly the loading anymation and then stays blank.
In the attached screenshot you can see the output of the console. Any ideas?
AngularJS Version: 1.7.2
NPM Version: 5.6.0
Gulp:
CLI version 3.9.1
Local version 3.9.1
What could make the difference that the project is running perfectly on other machines but not on mine?
[Edit]:
I have now reanimated my old macbook, checked out the exact same project with source tree, installed webstorm, ran npm install, then doing this to set up gulp and then running gulp dev: The App runs just fine.
On my Windows Laptop I've started all over, deinstalled WebStorm, deinstalled node.js and did the whole set up as described above. Only difference that I need to install node.js manually on Windows to use npm.... same error as described before.

Resources