VSCode launch configuration for debugging

[mlakmal]

Hi,

did anyone figured out how to set the vscode launch.json debug configuration for debugging? (we are on latest RN and using hermes)

im having hard time figuring out the webpack paths to be mapped in launch config.

[mlakmal]

fyi: was able to resolve this issue. by default babel will transpile code to single line and remove whitespaces. this causes issues with sourcemap locations. we can add below settings to babel-loader options to disable auto newline/whitespace removal.

{
          test: /\.[jt]sx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              /** Add React Refresh transform only when HMR is enabled. */
              plugins: devServer && devServer.hmr ? ['module:react-refresh/babel'] : undefined,
              /** retailLises and compact is used to keep the code formatting and whitespace in development mode 
               * if not, code will be transpile to one line of code and break debuggins support (source map may not work properly)
              */
              retainLines: mode === 'development',
              compact: mode === 'production',
         },
 }

and make sure to enable "sourceMapPathOverrides" in vscode launch.json
ex:

{
      "name": "Attach to Hermes application - iOS",
      "request": "attach",
      "type": "reactnativedirect",
      "platform": "ios",
      "cwd": "${workspaceFolder}/apps/project",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceFolder}/apps/project/*"
      }
}