Vscode-react-native: Can't add breakpoint, source maps issue?
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]
[11:35:12 AM]
[Hot Module Replacement] Server listening on /hot
React packager ready.
[11:35:12 AM]
[11:35:12 AM]
[11:35:13 AM]
[11:35:13 AM]
[11:35:13 AM]
[11:35:13 AM]
.[11:35:13 AM]
[11:35:14 AM]
[11:35:14 AM]
[11:35:14 AM]
### Packager started.
[11:35:14 AM]
[11:35:14 AM]
...................[11:35:42 AM]
[11:35:42 AM]
Starting custom debugger by executing: echo A debugger is not needed: "/Users/davidhelmer/Work/React Native/TypescriptTest4"
[11:35:43 AM]
.[11:35:44 AM]
[11:35:44 AM]
[11:35:44 AM]
.........[11:36:04 AM]
[11:36:04 AM]
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]
[11:44:40 AM]
[Hot Module Replacement] Server listening on /hot
React packager ready.
[11:44:40 AM]
[11:44:40 AM]
[11:44:40 AM]
[11:44:40 AM]
[11:44:41 AM]
[11:44:41 AM]
[11:44:41 AM]
[11:44:41 AM]
### Packager started.
[11:44:41 AM]
[11:44:41 AM]
[11:44:41 AM]
[11:44:41 AM]
[11:44:59 AM]
[11:44:59 AM]
Starting custom debugger by executing: echo A debugger is not needed: "/Users/davidhelmer/Work/React Native/TypescriptTest4"
[11:45:00 AM]
[11:45:00 AM]
[11:45:00 AM]
[11:45:00 AM]
[11:45:01 AM]
[11:45:01 AM]
[11:45:01 AM]
[11:45:01 AM]
[11:45:22 AM]
[11:45:22 AM]
Starting custom debugger by executing: echo A debugger is not needed: "/Users/davidhelmer/Work/React Native/TypescriptTest4"
[11:45:22 AM]
[11:45:22 AM]
[11:45:22 AM]
[11:45:22 AM]
- Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):
kidtsunami
All 33 comments
Here's the repo that I have been using to try this extension out.
kidtsunami
on 26 Oct 2016
same case, waiting for the solution.
owenyang0
on 2 Nov 2016
@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
on 10 Nov 2016
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
on 1 Dec 2016
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
vladimir-kotikov
on 5 Jan 2017
I'll close this for now, but if you try the steps referenced in https://github.com/Microsoft/vscode-react-native/issues/328#issuecomment-259699039 and they don't work, please do re-open the issue or file a new one so we can try to improve the situation.
MSLaguana
on 9 Jan 2017
We have followed the steps in https://github.com/Microsoft/vscode-react-native/issues/328#issuecomment-259699039 and have never gotten this to work.
joeferraro
on 9 Jan 2017
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?
MSLaguana
on 9 Jan 2017
Sure, will try to do so this week @kidtsunami
joeferraro
on 9 Jan 2017
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,
UppaJung
on 25 Jan 2017
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?
MSLaguana
on 25 Jan 2017
@MSLaguana, yes, I'll investigate
vladimir-kotikov
on 26 Jan 2017
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)
vladimir-kotikov
on 27 Jan 2017
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.
muccy
on 5 Mar 2017
@vladimir-kotikov Same problem reported by @muccy .
saeedtabrizi
on 5 Mar 2017
@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.
vladimir-kotikov
on 6 Mar 2017
@vladimir-kotikov Probably makes sense adding the note about it into README until resolved
ambientlight
on 18 Mar 2017
@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 https://github.com/facebook/react-native/commit/0849f84df26e4c56f5763375363bae90d94015fe.
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 https://github.com/facebook/react-native/issues/7083#issuecomment-284147710) 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 https://github.com/facebook/react-native/issues/12705 as it's basically the same issue.
vladimir-kotikov
on 27 Mar 2017
@vladimir-kotikov which implies we need to stick with 0.41.2 for some time now?
ambientlight
on 27 Mar 2017
@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.
alloy
on 27 Mar 2017
@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/ [email protected] but has some issues w/ 0.43 due to changes in public transformer's interface (https://github.com/mhzed/react-native-sm-transformer/issues/2)
@alloy, yeah, I completely agree
vladimir-kotikov
on 27 Mar 2017
@vladimir-kotikov Thanks for the suggestion.
ambientlight
on 27 Mar 2017
@vladimir-kotikov , is there any update or trick to solve problem urgently.
saeedtabrizi
on 19 Apr 2017
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 :(
MartinWebDev
on 23 May 2017
I had to switch after VS Code stopped debugging. Unfortunate. But this debugger is much better anyway.
https://github.com/jhen0409/react-native-debugger
inturbidus
on 25 May 2017
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?
Tableau-David-Potter
on 12 Jun 2017
Hi @vladimir-kotikov
If typescript debugging configuration changed so please add an example project for the true configuration.
Thanks
saeedtabrizi
on 27 Jun 2017
@saeedtabrizi, there is no changes required for TS configuration. For the sample project you can refer to https://github.com/panarasi/ReactNativeTS/pull/1 or checkout this repo directly: https://github.com/vladimir-kotikov/ReactNativeTS
vladimir-kotikov
on 27 Jun 2017
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?
Flavien
on 20 Jul 2017
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.
lukewlms
on 20 Jul 2017
@lukecwilliams responded here
vladimir-kotikov
on 26 Jul 2017
Still not work, any update or docs ?
Thanks ~
iShawnWang
on 25 Sep 2017
@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
on 2 Oct 2017
Related issues
vsccarl
·
3Comments
SounD120
·
4Comments
peterp
·
4Comments
tavrez
·
4Comments
AlexandreLouisnard
·
3Comments
Most helpful comment
@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.