Can't add breakpoint, source maps issue?

[kidtsunami]

Actual Behavior

1. I run the Debug iOS command from the debugger panel
2. Everything appears to load correctly into the Simulator and I'm able to compile my ts properly resulting in changes in the Simulator
3. I click to add a breakpoint to index.ios.tsx
4. Breakpoint appears grayed out and when I hover I see this message:
   "Breakpoint ignored because generated source code not found (source map problem?)"
   

Expected Behavior

1. I run the Debug iOS command from the debugger panel
2. Everything appears to load correctly into the Simulator and I'm able to compile my ts properly resulting in changes in the Simulator
3. I click to add a breakpoint to index.ios.tsx
4. Breakpoint is added and I'm able to refresh the simulator and see it catch

Software versions

• React-Native VS Code extension version: 0.2.1
• VSCode version: 1.6.1
• OS platform and version: Mac OS Sierra v10.12.1
• React Native version: 0.32.1

Outputs (Include if relevant)

• Output of the Debug Console (View -> Toggle Debug Console):
  [vscode-react-native] Starting React Native Packager.
  [vscode-react-native] Prewarming bundle cache. This may take a while ...
  [vscode-react-native] Building and running application.
  [vscode-react-native] Executing command: react-native run-ios --simulator iPhone 5s --project-path ios
  Found Xcode project TypescriptTest3.xcodeproj
  Launching iPhone 5s (10.0)...
  Building using "xcodebuild -project TypescriptTest3.xcodeproj -scheme TypescriptTest3 -destination id=E3F427C1-5B10-45B9-AE0E-313C6E72965F -derivedDataPath build"
  User defaults from command line:
  IDEDerivedDataPathOverride = /Users/davidhelmer/Work/React Native/TypescriptTest4/ios/build
  === BUILD TARGET RCTVibration OF PROJECT RCTVibration WITH CONFIGURATION Debug ===
  Check dependencies
  === BUILD TARGET RCTGeolocation OF PROJECT RCTGeolocation WITH CONFIGURATION Debug ===
  Check dependencies
  === BUILD TARGET RCTLinking OF PROJECT RCTLinking WITH CONFIGURATION Debug ===
  Check dependencies
  === BUILD TARGET React OF PROJECT React WITH CONFIGURATION Debug ===
  Check dependencies
  PhaseScriptExecution Run\ Script /Users/davidhelmer/Work/React\ Native/TypescriptTest4/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/React.build/Script-006B79A01A781F38006873D1.sh
  cd "/Users/davidhelmer/Work/React Native/TypescriptTest4/node_modules/react-native/React"
  export ACTION=build
  export AD_HOC_CODE_SIGNING_ALLOWED=NO
  export ALTERNATE_GROUP=staff
  export ALTERNATE_MODE=u+w,go-w,a+rX
  export ALTERNATE_OWNER=davidhelmer
  export ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO
  export ALWAYS_SEARCH_USER_PATHS=NO
  export ALWAYS_USE_SEPARATE_HEADERMAPS=NO
  export APPLE_INTERNAL_DEVELOPER_DIR=/AppleInternal/Developer
  export APPLE_INTERNAL_DIR=/AppleInternal
  export APPLE_INTERNAL_DOCUMENTATION_DIR=/AppleInternal/Documentation
  export APPLE_INTERNAL_LIBRARY_DIR=/AppleInternal/Library
  export APPLE_INTERNAL_TOOLS=/AppleInternal/Developer/Tools
  export APPLICATION_EXTENSION_API_ONLY=NO
  export APPLY_RULES_IN_COPY_FILES=NO
  export ARCHS=x86_64
  export ARCHS_STANDARD="i386 x86_64"
  export ARCHS_STANDARD_32_64_BIT="i386 x86_64"
  export ARCHS_STANDARD_32_BIT=i386
  export ARCHS_STANDARD_64_BIT=x86_64
  export ARCHS_STANDARD_INCLUDING_64_BIT="i386 x86_64"
  export ARCHS_UNIVERSAL_IPHONE_OS="i386 x86_64"
• Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):
  Getting exponent dependecy.
  Dependency not present. Installing it...
  ######### Checking react native is correctly setup. This may take a while... ##########
  Checking if the correct react native is installed..
  ######### Starting Packager ##########
  ######### Executing command: react-native start --port 8081 ##########
  ..Scanning 647 folders for symlinks in /Users/davidhelmer/Work/React Native/TypescriptTest4/node_modules (21ms)
  ┌────────────────────────────────────────────────────────────────────────────┐
  │ Running packager on port 8081. │
  │ │
  │ Keep this packager running while developing on any JS projects. Feel │
  │ free to close this tab and run your own packager instance if you │
  │ prefer. │
  │ │
  │ https://github.com/facebook/react-native │
  │ │
  └────────────────────────────────────────────────────────────────────────────┘
  Looking for JS files in
  /Users/davidhelmer/Work/React Native/TypescriptTest4

.[11:35:12 AM] Building Dependency Graph
[11:35:12 AM] Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

[11:35:12 AM] Crawling File System (443ms)
[11:35:12 AM] Building in-memory fs for JavaScript
[11:35:13 AM] Building in-memory fs for JavaScript (508ms)
[11:35:13 AM] Building in-memory fs for Assets
[11:35:13 AM] Building in-memory fs for Assets (413ms)
[11:35:13 AM] Building Haste Map
.[11:35:13 AM] Building (deprecated) Asset Map
[11:35:14 AM] Building (deprecated) Asset Map (167ms)
[11:35:14 AM] Building Haste Map (458ms)
[11:35:14 AM] Building Dependency Graph (1874ms)

### Packager started.

[11:35:14 AM] request:/index.ios.bundle?platform=ios
[11:35:14 AM] find dependencies
...................[11:35:42 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false
[11:35:42 AM] find dependencies
Starting custom debugger by executing: echo A debugger is not needed: "/Users/davidhelmer/Work/React Native/TypescriptTest4"
[11:35:43 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false
.[11:35:44 AM] find dependencies (1970ms)
[11:35:44 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false (2184ms)
[11:35:44 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false (1068ms)
.........[11:36:04 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false
[11:36:04 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false (24ms)
Starting custom debugger by executing: echo A debugger is not needed: "/Users/davidhelmer/Work/React Native/TypescriptTest4"
......######### Stopping Packager ##########

### Packager stopped

### Checking react native is correctly setup. This may take a while...

Checking if the correct react native is installed..

### Starting Packager

### Executing command: react-native start --port 8081

Scanning 647 folders for symlinks in /Users/davidhelmer/Work/React Native/TypescriptTest4/node_modules (38ms)
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/davidhelmer/Work/React Native/TypescriptTest4

[11:44:40 AM] Building Dependency Graph
[11:44:40 AM] Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

[11:44:40 AM] Crawling File System (284ms)
[11:44:40 AM] Building in-memory fs for JavaScript
[11:44:40 AM] Building in-memory fs for JavaScript (251ms)
[11:44:40 AM] Building in-memory fs for Assets
[11:44:41 AM] Building in-memory fs for Assets (201ms)
[11:44:41 AM] Building Haste Map
[11:44:41 AM] Building (deprecated) Asset Map
[11:44:41 AM] Building (deprecated) Asset Map (84ms)

### Packager started.

[11:44:41 AM] Building Haste Map (278ms)
[11:44:41 AM] Building Dependency Graph (1024ms)
[11:44:41 AM] request:/index.ios.bundle?platform=ios
[11:44:41 AM] find dependencies
[11:44:59 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false
[11:44:59 AM] find dependencies
Starting custom debugger by executing: echo A debugger is not needed: "/Users/davidhelmer/Work/React Native/TypescriptTest4"
[11:45:00 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false
[11:45:00 AM] find dependencies (1796ms)
[11:45:00 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false (1926ms)
[11:45:00 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false (761ms)
[11:45:01 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false
[11:45:01 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false (15ms)
[11:45:01 AM] request:/build/index.ios.map?platform=ios&dev=true&minify=false
[11:45:01 AM] request:/build/index.ios.map?platform=ios&dev=true&minify=false (59ms)
[11:45:22 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false
[11:45:22 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false (14ms)
Starting custom debugger by executing: echo A debugger is not needed: "/Users/davidhelmer/Work/React Native/TypescriptTest4"
[11:45:22 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false
[11:45:22 AM] request:/build/index.ios.bundle?platform=ios&dev=true&minify=false (11ms)
[11:45:22 AM] request:/build/index.ios.map?platform=ios&dev=true&minify=false
[11:45:22 AM] request:/build/index.ios.map?platform=ios&dev=true&minify=false (57ms)

• Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):

[kidtsunami]

Here's the repo that I have been using to try this extension out.

https://github.com/kidtsunami/TypescriptTest4

[owenyang0]

same case, waiting for the solution.

[vladimir-kotikov]

@kidtsunami, @owenyang0, this is something that will not work out of the box - you'll need to tweak your project to make react-native consider sourcemaps produced by typescript when generating resultant bundle. Check this article for more details: http://www.reactnative.tools/tutorials/2016/09/20/reactnative-ts . You can also use this repo: https://github.com/panarasi/ReactNativeTS as a project template that supports setting breakpoints in tsx files

[vladimir-kotikov]

Upd.: there is a PR mhzed/react-native-sm-transformer#1, that fixes some issues that are causing extension (and debugger) to fail breakpoints validation

[vladimir-kotikov]

Linking another relevant issue for cross-reference: #371

@MSLaguana, can we close both these issues? IMO there is nothing we can do here, unless we're not going to improve typescript support in the near future

[MSLaguana]

I'll close this for now, but if you try the steps referenced in #328 (comment) and they don't work, please do re-open the issue or file a new one so we can try to improve the situation.

[joeferraro]

We have followed the steps in #328 (comment) and have never gotten this to work.

[MSLaguana]

Can you please try debugging, get to the point where a breakpoint is not hit, and then upload the contents of .vscode/.react/index.<platform>.map somewhere so I can see how it looks?

[joeferraro]

Sure, will try to do so this week @kidtsunami

[UppaJung]

I've been having the same problem with breakpoints not getting set because mappings are lost. @pawsong found a workaround. Set tsconfig.json to use inlineSourceMap instead of sourceMap.

    //"sourceMap":true,
    "inlineSourceMap": true,

[MSLaguana]

That's interesting, since our debugger doesn't support inline sourcemaps. I suspect that when using non-inline sourcemaps, the JS compiled from TS is having the source maps ignored rather than rolled into end result, and using inline sourcemaps might be working around that. Definitely needs some more investigation. @vladimir-kotikov are you able to look into that?

[vladimir-kotikov]

@MSLaguana, yes, I'll investigate