Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Vscode breakpoints in TypeScript files not hit in React Native

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>