208

I just created a new project and have run it for the first time using F5 or Ctrl + F5. The result in Chrome is:

The site can't be reached

err_connection_refused

I checked the option at the breakpoints for "Exceptions caught" and the following error is displayed.

Enter image description here

Without "Exceptions caught" checked, the next error raised:

Enter image description here

I tried to run "ng s -o" from the terminal and all work fine. The site is working well on port 4200, but I like to debug.

Here is my launch.json file, all by default:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Why is this happening?

9
  • 4
    crbug/1173575 is a reference to crbug.com/1173575 which is a shortcut to the chrome bugs list
    – Rosco
    Commented Apr 28, 2021 at 4:34
  • 1
    278k views, 55 upvotes, 41 answers most with zero upvotes, one with 15, next highest 5 and no accepted answer. None of the answers seem to address the problem described in the error message, rather they are mostly "I changed something and it went away". Hmm....
    – Mike Wise
    Commented Jan 20, 2022 at 16:11
  • @MikeWise this appears to be a browser bug, only Chrome Devs at Google can really figure out what's going on here. We can only guess.
    – Mahn
    Commented Jan 21, 2022 at 18:22
  • it worked for me DetTools > Preferences > Restore defaults and reload Commented Mar 11, 2022 at 17:36
  • 3
    This way worked for me! 1- Start react app with npm start 2- Press F5 in vs code
    – Varooneh
    Commented Apr 11, 2022 at 15:22

52 Answers 52

87

I also had this issue and none of the solutions listed were helpful. However, the problem was rather easy to solve.

Just go into the Network tab of the Chrome Developer Console. Be sure that the connection is on No throttling and not Offline.

Tutorial

13
  • 7
    This was the solution for me I accidentally changed it to offline and did not recognize. Thank you!
    – Chris
    Commented Jan 9, 2022 at 22:22
  • for me - Chrome somehow changed itself - so take a while figure out
    – Bruno
    Commented Mar 8, 2022 at 20:37
  • 2
    This was the issue for me as well. If you're playing with PWAs and happen to change to offline mode in the application tab, note that it changes more than just the application tab... Commented Apr 4, 2022 at 15:15
  • 2
    This wasn't my problem, but I just discovered I've done 2 weeks worth of testing, coding and googling on "slow 3G"... fml Commented Nov 30, 2022 at 1:15
  • 2
    So weird, I don't recall changing this tho. Thanks this worked.
    – maiakd
    Commented Mar 9, 2023 at 13:10
65

This misleading error message seemingly has nothing to do with Chrome or any deprecated functionality. It can have many root causes and seems to occur whenever connectivity can't be established.

I got this while following the React tutorial for Visual Studio Code. In that tutorial you start by creating a template with npx and then running it with npm start. That worked, and I could see that it was using http://localhost:3000 for the URL in the browser.

However, when I changed the code as the tutorial requested and set a breakpoint to debug, I got the error in the OP's post, both with Chrome and with Edge.

Visual Studio Code was creating a default launch.json file for debugging and populating it like this:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

And I needed to manually change the 8080 to 3000 which fixed the problem.

The key for me was configuring the breakpoint to catch the exception like the OP described (note - you can only configure that with the Debug icon selected in the far left icon menu). While the emitted error message is still the misleading "deprecated" one, there was a message that "the site can't be reached" which you can find if you dig a little - as shown here:

Enter image description here

I imagine that practically any configuration issue that causes the connection to fail will cause this error. So firewall issues, missing host program, bad configuration (like mine), etc.

1
  • 2
    Yes i agree, it is misleading.. for me personally i came across it when i were accessing an idle browser tab when i had shutdown connectivity for React.. it started up on a new port and therefore it werent rendering/it was showing this message Commented Sep 22, 2022 at 6:50
37

I had the same issue and the problem was with the URL. It was https://localhost:8000; in place of http://localhost:8000.

So try checking your URL and routes.

5
  • 1
    Thanks. I look up, and for a strange reason, after refresh changes from 127.0.0.1:3000 to 127.0.0.1.com:3000 but it still show 127.0.0.1:3000. Very strange.
    – ESL
    Commented Nov 1, 2021 at 8:18
  • 4
    So it should be https or http? I can't be sure from the phrasing which one is correct.
    – Mike Wise
    Commented Jan 20, 2022 at 15:43
  • JoelSebstn is still active and should be able to answer Mike Wise's question. Commented Aug 16, 2022 at 18:10
  • It depends on the security level you set, mainly for me this error was because of the mistake in url. Try out your possibilities
    – JoelSebstn
    Commented Aug 18, 2022 at 2:36
  • 1
    Chrome sometimes redirects http to https, to fix this go to chrome://net-internals/#hsts and then at the bottom Delete domain security policies type in localhost and hit delete. try localhost:4200 again.
    – Pierre
    Commented Nov 23, 2022 at 9:39
36

My server was just not running locally. :) Starting it on localhost solved it.

6
  • 11
    Is this inbuilt debugger not supposed to do that for us?
    – Corné
    Commented Aug 20, 2021 at 11:49
  • 5
    Would this (the error message) be considered a bug? Crbug/1173575, non-JS module files deprecated is misleading and definitely doesn't mean "No site at http://localhost:8000" Commented Jan 3, 2022 at 1:11
  • 8
    This caught me out too. I assumed that starting the debugger would run npm start too, but it doesn't. Commented Mar 7, 2022 at 11:00
  • 1
    This tripped me up too. I think the old, now deprecated (chrome) debugger extension did start the server automatically. Thank you.
    – Michael
    Commented Jul 12, 2022 at 19:30
  • 2
    Just had to restart Live Server in VSCode
    – Leta
    Commented Jul 15, 2022 at 21:43
27

For me, the issue was a React/Next.js application was not running.

Basically, you have to keep the application running in a separate window/terminal to be able to attach the debugger. This is unlike the other application where it starts from debug console itself.

2
  • 3
    This is what caused my crbug. What a misleading error msg!
    – Ask P
    Commented Aug 21, 2022 at 10:49
  • Definitely helpful for NextJS and ReactJS. Deploy your app using a terminal and use the same port in your launch.json. To generate launch.json, use the JavaScript Debugger extension from VSCode. Don't forget to update webRoot to your base folder, in React it's src. Commented Oct 1, 2023 at 7:02
12

In my case, it got resolved by closing the browser and recompiling the app.

5
  • 3
    Same here. All I had to do was close and re-open Chrome. Commented Aug 12, 2021 at 19:05
  • 1
    Are both needed? Or will just one of the two do? Why? Why not? Commented Sep 8, 2021 at 18:57
  • I swtiched to FireFox and got a different error This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”. Commented Aug 30, 2022 at 6:31
  • It turns out I forgot to add the JS file with the AJAX. Commented Aug 30, 2022 at 6:32
  • Even after closing and recompiling there was issue in my case, but refreshing the application worked for me. I did not understand why it happened this way. Commented Mar 10, 2023 at 5:32
10

Instead of launching your application using the option "Launch Chrome against localhost", rather set your application name for launching - Resolved.

See the attached image for more context.

Enter image description here

4
  • 1
    Not sure where you're selecting this option according to your layout screenshot.... where would be be located via the menus?
    – paulywill
    Commented Dec 16, 2021 at 21:37
  • 1
    i have a js file called sketch.js so i change the name to that? why would this have a potential effect?
    – Soma Juice
    Commented May 13, 2022 at 9:31
  • What do you mean by "Resolved"? What does it refer to? What is resolved? Is it literal? Can you elaborate? Commented Aug 16, 2022 at 18:04
  • OK, the OP has left the building: "Last seen more than 1 year ago" Commented Aug 16, 2022 at 18:05
9

Console error message

I had this same error and I resolved it by turning off my plugins. Specifically a CORS plugin I have been using.

1
  • 1
    In Google Chrome, I presume. Commented Sep 8, 2021 at 18:55
5

Try this:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "type": "dart"
        }
    ]
}
1
  • 1
    This worked! But could you add an explanation as to why it would work?
    – Fross
    Commented Jan 24, 2022 at 22:36
4

I've tried many of the solutions suggested, and found someplace else this tip that was helpful:

I was unable to reach http://localhost:3000 from npm start run in a react app. So I tried: http://127.0.0.1:3000 and to my surprise it worked!

After some googling, I tried a suggestion to erase my browser cache, so I did it. All cached images and files (Google Chrome) and boom! It worked once again.

3

I displayed a similar message in my debug console and the problem was that the local web server was turned off and therefore unreachable.

I turned on the server in the virtual machine and the app started working again :-)

0
3

In my case, I had a Blazor solution and began receiving the "Crbug/1173575, non-JS module files deprecated message". Besides this, I also received a 404 error for the Index.html file!

The cause was that I inadvertently removed the reference in the .Server project to the .Client project. The project compiled fine without the reference, but I guess ASP.NET Core does some sort of reflection-based analysis on the dependencies to dynamically build the route map.

Restoring the reference to the .Client project on the .Server project fixed the problem.

2

I have seen a lot of solutions for this problem, but nothing worked.

After a little debugging and commenting out many parts of the code, I managed to locate the issue.

Basically, it occurs on the backend; not the frontend.

There was an infinite loop that kept responses stuck. Fixing that issue, solved it for me.

2

I had a similar issue. However, I discovered a different solution. It's still worth checking the steps in the GitHub link from the OP’s solution.

The project I was working on was made in an older version, and the launch.json URL had // delimiters. Replacing these with no delimiters resolved the issue.

from

"url":"file:///C://exampleParent//exampleChild//file.txt"

to

 "url":"file:///c:/exampleParent/exampleChild/file.txt"
2

I had the same issue with an app that needed to run navigator.geolocation.getCurrentPosition in my React application which of course needs HTTPS.

// .env.local HTTPS is set to true
HTTPS=true

The problem - I was loading the page with HTTP and not HTTPS.

Error Screenshot

2

I think we should just remove the cookies in that URL:

Enter image description here

0
2

In my case, the problem was because port 4200 was taken by another application (Docker). As soon as I changed the port to 4201 by adding the next structure in the serve section of angular.json file the problem was solved.

"options": {
    "port": 4201
}
2

My problem was in the network settings of my Windows 10 computer, not on the browser. I have tried my URL in another computer and mobile browsers, and it was working fine.

So, I have fixed the issue by resetting my network settings

To do that, go to SettingsNetwork and Internet → Scroll down to Network reset.

Wait for 5 minute until it restarts.

1
  • 1
    I was facing the exact same issue. This solved it. Thanks for the support.
    – Vedant
    Commented Jul 1, 2022 at 5:26
2

To add another angle to this. I named my JavaScript modules with .mjs. After setting my web server to serve mjs with MIME type application/javascript. I got the error

'crbug/1173575, non-JS module files deprecated.'

None of the answers here helped. To fix it I gave a path to the module.

From

<script type="module" src="xxx.mjs"></script>

To

<script type="module" src="./xxx.mjs"></script>

And the error went away.

1
  • I turned out my JS file was never added. Commented Aug 30, 2022 at 6:49
2

I ran into this error on three separate Next.js projects. It was the same error in Chrome, Chrome Incognito, Firefox, and Edge.

It happened on a production build (next build && next start) and development server (next dev). After trying a number of fixes – ensuring I was on HTTP, not HTTPS, checking if the port was in use, deleting folder node_modules and running npm install, etc. – the thing that finally worked was restarting my computer...

0
1

This may be of use to someone working on a project that communicates across iframes, I found this warning within a current web application: Crbug/1173575, non-JS module files deprecated.

In my case, the reason was that the resource iframe origin wasn't being served meaning the Iframe request URL was not accessible. When serving the resource the warning disappeared.

1

I had the error crbug/1173575, non-JS module files deprecated with some PDF files displayed in an iframe.

It was because they had a comma (",") in the filename. After renaming the file, everything was OK.

1

I faced this issue while debugging in Visual Studio Code for an Angular application.

The probable causes may be the server is not up and listening to port. You may start the server manually by ng serve --port with port number. Also compare the URL in launch.json and compare the port number.

1
  • The same issue may come sometimes if the code line is unreachable like some methods which are never called or you modify the code without saving.The ideal senario is to check the flow if the code is ever called and if all the files are saved before running the debugger in vs code Commented Jul 12, 2023 at 20:13
1

In my case it was caused by uBlock Origin. Disabling it on the website promptly fixed the error.

1

In my case, this error presented itself on a Ruby on Rails project.

This error appeared after merging the main branch with my feature branch (using Git) in a Ruby on Rails project. Someone added some new gems to the project and, as I was using pm2 to start the server, and I wasn't noticing they were missing.

I stopped the pm2 server and started it manually by running bundle exec ./bin/webpack-dev-server and the error message popped up:

Could not find sentry-ruby-5.2.1, sentry-rails-5.2.1, sentry-ruby-core-5.2.1 in any of the sources

I ran bundle install to install the missing gems, and restarted the server (this time using pm2).

After the server started, the application started working again on the http://localhost:3000/ URL.

1

I was adding links to Amazon Affiliate while all of a sudden I faced this error.

To solve it, just stop your adblocker.

1
  • Which blocker did you use? On what platform (incl. version)? Windows 10? Commented Aug 16, 2022 at 20:38
1

For aiohttp.

I've stumbled upon this issue with an aiohttp server. By default it was running on 0.0.0.0:8000 The solution was to change the host and the port to localhost:8080 in main.py file: web.run_app(app, host='localhost', port=8080)

1
  • Browsing to localhost instead of my network IP seems to appease the Inspector. Thanks @roy_o'bannon Commented Sep 22, 2022 at 21:24
0

When I try and follow the steps described on Chrome Debugging with Angular CLI, I get a message that the library is no longer supported and a link to this article:

Request’s Past, Present and Future #3142

0

I had encountered the same problem in Visual Studio Code when I tried to debug a Python file. I resolved it by deleting the previous launch.json file and create a new one for this file.

0

I had a similar encounter in a JavaScript project. But I hadn’t learned JSON, but I just deleted the last three commands in the JSON file that is removed the names "url" and "webroot".

Not the answer you're looking for? Browse other questions tagged or ask your own question.