18

I have a React Native 0.61 project, TypeScript 3.6.2 and Vscode 1.38.1.

Here is my launch config:

{
    "name": "Debug iOS",
    "cwd": "${workspaceFolder}",
    "type": "reactnative",
    "request": "launch",
    "platform": "ios"  
},

tsconfig.json:

  {
    "compilerOptions": {
      // Target latest version of ECMAScript.
      "target": "esnext",
      // Search under node_modules for non-relative imports.
      "moduleResolution": "node",
      // Process & infer types from .js files.
      "allowJs": true,
      // Don't emit; allow Babel to transform files.
      "noEmit": true,
      // Enable strictest settings like strictNullChecks & noImplicitAny.
      "strict": true,
      // Disallow features that require cross-file information for emit.
      "isolatedModules": true,
      // Import non-ES modules as default imports.
      "esModuleInterop": true,
      "baseUrl": "./src",
      "jsx": "react-native",
    }
  }

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

I start debugging in Vscode, I see the following outputs:

Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application
Debugger worker loaded runtime on port 4021

However, my breakpoints won't get hit. They are left as blank, gray, "unverified breakpoint"s in Vscode when I start debugging. If I put any debugger statement into the code itself, it gets hit in the generated/transpiled .bundle file:

enter image description here

enter image description here

Here are a few things that I've tried (none of them work):

  • Added "sourceMaps": true, to my launch config
  • Added "outDir": "${workspaceRoot}/.vscode/.react" to my launch config (I've tried it even though it says "Property outDir is not allowed"
  • Added "sourceMap": true to my tsconfig
  • Added "outDir": "build" to my tsconfig
  • Added "module": "commonjs" to my tsconfig
  • Added "inlineSourceMap": true to my tsconfig

Obviously, I've tried them one by one, adding one at a time, not at once. I've also closed Vscode, deleted any Metro cache files (haste module map etc) and reopened Vscode in each step.

I've read the possibly related questions and answers at:

Also, here is the output from my react-native info, if it helps:

System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Memory: 3.69 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: ^0.61.1 => 0.61.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-gesture-handler: 1.0.16

What am I doing wrong?

4
  • Any luck with this? Commented Jan 5, 2020 at 2:34
  • 1
    @OpMt I know it's weird but the problem went away by itself. Commented Jan 14, 2020 at 9:49
  • install vscode react native extension version 0.17.0 using vsix... disable auto update of extensions.....remove the platform from your launch.json and change request->launch to attach.... start this process in vscode and after this open developer menu on simulator by ctrl + cmd + z and hit debug on chrome....happy coding bro. Commented Jun 7, 2024 at 12:12
  • if this works, let me know. will post it as answer with detailed instructions for future.. Commented Jun 7, 2024 at 12:13

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.