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:
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:
- vscode react+typescript + mocha: breakpoints not hit
- vscode react-native typescript breakpoint not hit: source map
- Setting the 'outDir' attribute in Visual Studio Code
- typescript outDir setting in tsconfig.json not working
- React native + typescript can't see ts in chrome debugger
- how to debug typescript files in visual studio code
- https://github.com/Microsoft/vscode-react-native/issues/405
- https://gist.github.com/frogcjn/3bb47ce01a5168d8cd570a46cc71bb02
- https://hackernoon.com/debugging-javascript-typescript-node-apps-with-chrome-devtools-vs-code-and-webstorm-97b882aee0ad
- Typescript sourcemap not working in vscode
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?