ameen
ameen

Reputation: 253

I'm getting "Could not read source map for chrome-error://chromewebdata/:" When attempting to run my Flutter app on Chrome

Here is the full error:

Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/neterror.rollup.js.map: Unsupported protocol "chrome-error:"

I have tried clearing browsing data as suggested online but I can't seem to find any other guidance. Help much appreciated.

Expected

I was expecting for the app to launch in Chrome.

Upvotes: 25

Views: 82924

Answers (6)

Lorenzo Delana
Lorenzo Delana

Reputation: 637

I got the same in a react app upgraded to use vite ( you can get skeleton by yarn create vite repro -- --template react-ts )

The problem was that in my older app, I missed the index.html file, which in turn contains the reference to the module /src/index.tsx.

Upvotes: 2

john
john

Reputation: 37

I tried all the answers, but none could solve my issue. Also, I have uninstalled vscode but have no success. In my case, the error comes when I try to run a .js file. I solved my issue after deleting the .vscode folder that contained the launch.json file. This .vscode folder is located in the place where my .js file is located. Here, the .vscode folder is temporarily created in my html and js folder after I run the .js file. Hope this helps.

Upvotes: 0

Marcelo Scofano Diniz
Marcelo Scofano Diniz

Reputation: 669

I had this problem trying to debug a React - Vite - Typescript app in VS Code. After I saw @Stephen Paton's answer though that adding

  "configurations": [
    {
      "preLaunchTask": "npm: vite",
    },

would do the trick, but it is more involving than that. We should:

1)still add launch.json at .vscode

2)add:

  "configurations": [
    {
      "preLaunchTask": "vite",
    },

3)add tasks.json at .vscode

  {"version": "2.0.0",
  "tasks": [
    {
      "label": "vite",
      "type": "npm",
      "script": "dev",
      "isBackground": true,
      "problemMatcher": [
        {
          "owner": "typescript",
          "source": "ts",
          "applyTo": "closedDocuments",
          "fileLocation": ["relative", "${cwd}"],
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": {
              "regexp": ".*"
            },
            "endsPattern": {
              "regexp": ".*compiled successfully.*"
            }
          }
        }
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

There is a minor catch, that I didn't see from the beginning, and cost me couple minutes to figure out why Chrome did not show up...

We have to click in Debug Anyway, of course. enter image description here

Upvotes: 0

Vivek yadav
Vivek yadav

Reputation: 11

2 Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/neterror.rollup.js.map: Unsupported protocol "chrome-error:"

Upvotes: -3

Stephen Patton
Stephen Patton

Reputation: 103

Thank you Sinos Gray! Once I saw this, I realized all I needed to do was to add a preLaunchTask setting to the configuration in launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "preLaunchTask": "npm: start",
    },
  ]
}

Now it runs via run (F5)

Hope this helps!!! :)

Upvotes: 4

Sinos Gray
Sinos Gray

Reputation: 251

try to run npm start in terminal

then start debugging f5 in vscode

Upvotes: 23

Related Questions