Can't add breakpoint, source maps issue? #328

kidtsunami · 2016-10-26T15:47:17Z

Actual Behavior

I run the Debug iOS command from the debugger panel
Everything appears to load correctly into the Simulator and I'm able to compile my ts properly resulting in changes in the Simulator
I click to add a breakpoint to index.ios.tsx
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

I run the Debug iOS command from the debugger panel
Everything appears to load correctly into the Simulator and I'm able to compile my ts properly resulting in changes in the Simulator
I click to add a breakpoint to index.ios.tsx
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 · 2016-10-26T18:56:34Z

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

https://github.com/kidtsunami/TypescriptTest4

owenyang0 · 2016-11-02T15:24:13Z

same case, waiting for the solution.

vladimir-kotikov · 2016-11-10T14:10:48Z

@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 · 2016-12-01T09:45:09Z

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 · 2017-01-05T08:35:21Z

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 · 2017-01-09T21:51:35Z

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 · 2017-01-09T21:55:07Z

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

MSLaguana · 2017-01-09T21:58:43Z

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 · 2017-01-09T21:59:35Z

Sure, will try to do so this week @kidtsunami

UppaJung · 2017-01-25T05:44:44Z

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 · 2017-01-25T16:54:50Z

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 · 2017-01-26T06:49:59Z

@MSLaguana, yes, I'll investigate

vladimir-kotikov · 2017-01-27T13:04:01Z

I confirm, that adding "inlineSourceMap": true, does the trick. It looks like babel, when compiles the bundle, doesn't bother with reading source maps from disk (this is the case when "sourceMap":true and the map is stored in separate file) and completely ignores the fact that source js file was generated. However if source map is inlined, babel takes it to the final map.

However, notice that the recipe above works only when you also have "sourceRoot" property in your tsconfig.json because otherwise typescript will produce maps with path to source, relative to js file and hence these paths will become invalid relative to final map file. Adding "sourceRoot" forces babel to calculate absolute paths to sources (which we will then recalculate and make relative to the downloaded bundle)

muccy · 2017-03-05T10:38:45Z

Hi, inlineSourceMap + sourceRoot worked until I upgraded to React Native 0.42 this morning. Now breakpoints aren't hit anymore. I also tried to force a fresh install with this script:

rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean && rm -rf ios/build/ModuleCache/* && rm -rf node_modules/ && rm -rf build && npm install

No success.

saeedtabrizi · 2017-03-05T16:44:57Z

@vladimir-kotikov Same problem reported by @muccy .

vladimir-kotikov · 2017-03-06T11:09:15Z

@muccy, @saeedtabrizi, thanks for reporting. I confirm that I can see the same problem after upgrading to RN 0.42. I'll investigate and let you know if there are any solutions or workarounds.

ambientlight · 2017-03-18T19:21:31Z

@vladimir-kotikov Probably makes sense adding the note about it into README until resolved

vladimir-kotikov · 2017-03-27T11:36:57Z

@ambientlight, Hmm, I think it's an undocumented feature so I doubt it's worth mentioning this in README.

Also posting here some investigation results. The functionality that was merging existing source maps w/ ones produced by react-native packager was broken in facebook/react-native@0849f84.

Since this commit packager no longer uses babel's transform method (which has a special logic to merge source maps from original file w/ generated ones) to produce transpiled code and instead uses babel-generator's default generator directly.

The solution might be to reimplement this merging logic (as suggested by @alloy in facebook/react-native#7083 (comment)) in react-native's transformer but this would have some performance drawbacks, as merging process would use source-maps module, and that's what Facebook folks are trying to avoid.

Also linking facebook/react-native#12705 as it's basically the same issue.

ambientlight · 2017-03-27T11:49:05Z

@vladimir-kotikov which implies we need to stick with 0.41.2 for some time now?

alloy · 2017-03-27T12:02:10Z

@vladimir-kotikov FWIW, the performance drawbacks have been negligible during iterative development. I think it was noticeable in a clean (uncached) build, but haven’t performed any profiling.

vladimir-kotikov · 2017-03-27T12:46:29Z

@ambientlight, you still could try an approach w/ passing custom transformer to post-process source maps - see http://www.reactnative.tools/tutorials/2016/09/20/reactnative-ts/, "Enabling sourcemaps" section and https://github.com/panarasi/ReactNativeTS/blob/master/package.json#L8 as an example - this will work w/ react-native@0.42 but has some issues w/ 0.43 due to changes in public transformer's interface (mhzed/react-native-sm-transformer#2)

@alloy, yeah, I completely agree

ambientlight · 2017-03-27T13:48:43Z

@vladimir-kotikov Thanks for the suggestion.

saeedtabrizi · 2017-04-19T11:58:06Z

@vladimir-kotikov , is there any update or trick to solve problem urgently.

MartinWebDev · 2017-05-23T05:18:13Z

Any updates on this?
I am getting increasingly angry at react-native. My impression so far it's that it's one of the hardest things on earth to debug! Haha. Why is a simple solution so hard to find :(

inturbidus · 2017-05-25T00:31:57Z

I had to switch after VS Code stopped debugging. Unfortunate. But this debugger is much better anyway.
https://github.com/jhen0409/react-native-debugger

Tableau-David-Potter · 2017-06-12T18:59:23Z

I've seen several statements to follow the recommendations at http://www.reactnative.tools/tutorials/2016/09/20/reactnative-ts/. That page suggests executing this command:

react-native start --transformer node_modules/react-native-sm-transformer

I don't ever use that command in my current workflow. I use this commands:

react-native run-ios
react-native run-android

How does that article help solve the problem of debugging a React Native app in TypeScript?

saeedtabrizi · 2017-06-27T16:47:28Z

Hi @vladimir-kotikov
If typescript debugging configuration changed so please add an example project for the true configuration.

Thanks

vladimir-kotikov · 2017-06-27T18:35:12Z

@saeedtabrizi, there is no changes required for TS configuration. For the sample project you can refer to panarasi/ReactNativeTS#1 or checkout this repo directly: https://github.com/vladimir-kotikov/ReactNativeTS

Flavien · 2017-07-20T00:04:57Z

react-native start --transformer node_modules/react-native-sm-transformer fails with EISDIR: illegal operation on a directory, read. Is that broken? Can someone debug react-native with TypeScript at all?

lukewlms · 2017-07-20T19:44:48Z

Confirmed TS debugging appears to be totally broken in React Native. Could not get sourcemaps working on the ReactNativeTS project referenced by @vladimir-kotikov.

This thread can probably be closed until (we hope) the relevant RN repo issue is resolved.

vladimir-kotikov · 2017-07-26T09:47:36Z

@lukecwilliams responded here

iShawnWang · 2017-09-25T07:20:29Z

Still not work, any update or docs ?
Thanks ~

vladimir-kotikov · 2017-10-02T06:57:57Z

@iShawnWang sorry for late response - if this is still actual, could you please provide a bit more info. Would be ideal if you create a new issue and provide all details asked in issue template

vladimir-kotikov mentioned this issue Dec 28, 2016

Can't get TypeScript debugging to work to hit breakpoint. #371

Closed

MSLaguana closed this as completed Jan 9, 2017

MSLaguana reopened this Jan 9, 2017

This was referenced Feb 22, 2017

How to properly use this extension with TypeScript #402

Closed

How do I debug the typescript code? #405

Closed

vladimir-kotikov added bug 📚 documentation triaged labels Mar 23, 2017

seyaobey mentioned this issue Apr 18, 2017

typescript breakpoints not working #441

Closed

vladimir-kotikov added the typescript label May 31, 2017

vladimir-kotikov mentioned this issue Jun 8, 2017

Breakpoints not hit in typescript files #438

Closed

vladimir-kotikov added the Hi Pri label Jun 8, 2017

vladimir-kotikov mentioned this issue Jun 27, 2017

Allow to set breakpoints in original source files #461

Merged

vladimir-kotikov closed this as completed in #461 Jun 27, 2017

StevusPrimus mentioned this issue May 10, 2022

[Bug] After a code change while debugging, VSCode cannot find map source. #1773

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't add breakpoint, source maps issue? #328

Can't add breakpoint, source maps issue? #328

kidtsunami commented Oct 26, 2016

kidtsunami commented Oct 26, 2016

owenyang0 commented Nov 2, 2016

vladimir-kotikov commented Nov 10, 2016 •

edited

vladimir-kotikov commented Dec 1, 2016

vladimir-kotikov commented Jan 5, 2017

MSLaguana commented Jan 9, 2017

joeferraro commented Jan 9, 2017

MSLaguana commented Jan 9, 2017

joeferraro commented Jan 9, 2017

UppaJung commented Jan 25, 2017

MSLaguana commented Jan 25, 2017

vladimir-kotikov commented Jan 26, 2017

vladimir-kotikov commented Jan 27, 2017

muccy commented Mar 5, 2017 •

edited

saeedtabrizi commented Mar 5, 2017

vladimir-kotikov commented Mar 6, 2017

ambientlight commented Mar 18, 2017

vladimir-kotikov commented Mar 27, 2017

ambientlight commented Mar 27, 2017

alloy commented Mar 27, 2017 •

edited

vladimir-kotikov commented Mar 27, 2017

ambientlight commented Mar 27, 2017

saeedtabrizi commented Apr 19, 2017

MartinWebDev commented May 23, 2017

inturbidus commented May 25, 2017

Tableau-David-Potter commented Jun 12, 2017

saeedtabrizi commented Jun 27, 2017

vladimir-kotikov commented Jun 27, 2017

Flavien commented Jul 20, 2017

lukewlms commented Jul 20, 2017 •

edited

vladimir-kotikov commented Jul 26, 2017

iShawnWang commented Sep 25, 2017

vladimir-kotikov commented Oct 2, 2017

Can't add breakpoint, source maps issue? #328

Can't add breakpoint, source maps issue? #328

Comments

kidtsunami commented Oct 26, 2016

Actual Behavior

Expected Behavior

Software versions

Outputs (Include if relevant)

### Packager started.

### Packager stopped

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

### Starting Packager

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

### Packager started.

kidtsunami commented Oct 26, 2016

owenyang0 commented Nov 2, 2016

vladimir-kotikov commented Nov 10, 2016 • edited

vladimir-kotikov commented Dec 1, 2016

vladimir-kotikov commented Jan 5, 2017

MSLaguana commented Jan 9, 2017

joeferraro commented Jan 9, 2017

MSLaguana commented Jan 9, 2017

joeferraro commented Jan 9, 2017

UppaJung commented Jan 25, 2017

MSLaguana commented Jan 25, 2017

vladimir-kotikov commented Jan 26, 2017

vladimir-kotikov commented Jan 27, 2017

muccy commented Mar 5, 2017 • edited

saeedtabrizi commented Mar 5, 2017

vladimir-kotikov commented Mar 6, 2017

ambientlight commented Mar 18, 2017

vladimir-kotikov commented Mar 27, 2017

ambientlight commented Mar 27, 2017

alloy commented Mar 27, 2017 • edited

vladimir-kotikov commented Mar 27, 2017

ambientlight commented Mar 27, 2017

saeedtabrizi commented Apr 19, 2017

MartinWebDev commented May 23, 2017

inturbidus commented May 25, 2017

Tableau-David-Potter commented Jun 12, 2017

saeedtabrizi commented Jun 27, 2017

vladimir-kotikov commented Jun 27, 2017

Flavien commented Jul 20, 2017

lukewlms commented Jul 20, 2017 • edited

vladimir-kotikov commented Jul 26, 2017

iShawnWang commented Sep 25, 2017

vladimir-kotikov commented Oct 2, 2017

vladimir-kotikov commented Nov 10, 2016 •

edited

muccy commented Mar 5, 2017 •

edited

alloy commented Mar 27, 2017 •

edited

lukewlms commented Jul 20, 2017 •

edited