React Native (Android) Windows 10 debugging - Source map not loading correctly

Viewed 563

I have a react native project that I have started on my macbook some months ago. No problems with source maps on Chrome DevTools or React Native Debugger. Recently I got a Windows 10 laptop for gaming. But I would like to also use the Windows PC for developing the React Native app.

I followed all the steps on the React Native website for setting up the dev environment on Windows 10 for Android development (with react-native-cli - not expo). I can run my existing RN project on Windows. Works fine installing on emulator or device.

The problem is that the source map does not load correctly. On my macbook (and also on my ubuntu VM) the source map loads in a tree like structure as one would expect. But on Windows 10 Chrome DevTools (and RN Debugger) the source map seems to load all the source files (including the node-modules) in one big list like this:

Windows 10 RN Chrome DevTools Sources

Has anyone else experienced this and found a solution?

It works painlessly on mac and ubuntu.

1 Answers

OK so after countless hours of pulling my hair out as to why this didn't work properly on Windows Chrome DevTools and RN Debugger for Windows, I started looking for alternatives.

My solution is to just use Visual Studio Code React Native Tools extension. It works great. I can just debug the app directly in VS Code instead of using chrome at all. No need for source maps when debugging directly in the editor.

Related