VSCode debugging with Create-React-App

Question

I'd like to set my VS Code to debug my React-app created using 'create-react-app'.

I've tried this configuration:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch node",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/index.js",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "sourceMaps": true,
            "outFiles": []
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 9222,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }
    ]
}

but I get error the following error:

Debugger listening on port 11198
e:\form\src\index.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                             ^^^^^^

SyntaxError: Unexpected reserved word

...

I guess I need to set the 'preLaunchTask' to babel or the 'outFiles' to some dist folder, but I have no idea where should I point it to.

I'll be grateful for ideas. tnx

Gifford N. · Accepted Answer · 2022-08-12 18:51:51Z

13

Your config is not correct. It should be:

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/src",
    "userDataDir": "${workspaceRoot}/.vscode/chrome",
    "sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*"
    }
  }]
}

For more details: https://create-react-app.dev/docs/setting-up-your-editor/#debugging-in-the-editor

edited Aug 12, 2022 at 18:51

Gifford N.

4286 silver badges15 bronze badges

answered Jun 2, 2017 at 10:06

Hien

2,1302 gold badges18 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gilad.T Over a year ago

Works like charm! Thanks!

psalaets Over a year ago

Looks like the docs have moved to facebook.github.io/create-react-app/docs/…

Collectives™ on Stack Overflow

VSCode debugging with Create-React-App

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related