Vscode-react-native: Not able to read source maps from Fable (F# to JS compiler)

[alfonsogarciacaro]

Hi there! I'm trying the last version of the vscode-react-native extension (0.1.6) and it seems that it's still not able to read source maps from Fable. I've followed the instructions in the README (adding a .babelrc file, etc) and with a very similar configuration I do can use Typescript source maps. Actually, if I set a break point in the F# source code the debugger will pause but it does it in the index.android.bundle file so I guess it's not reading the source maps correctly. I'm pasting here the relevant files in case you could give me a hint about the problem and how to solve it:

src/fableLib.fsx

let rev (s: string) =
    s |> Seq.rev |> Seq.map string |> String.concat " "

out/fableLib.js

import { String as _String } from "fable-core";
import { Seq } from "fable-core";
export function rev(s) {
    return _String.join(" ", Seq.map(value => value, Seq.reverse(s)));
}
//# sourceMappingURL=fableLib.js.map

out/fableLib.js.map

{"version":3,"sources":["../src/fableLib.fsx"],"names":[],"mappings":";;AAAA,OACsC;AAAA,6BAAlB,wBAAX,cAAW,CAAkB;AAAiB","file":"fableLib.js","sourceRoot":"/Users/alfonsogarciacaronunez/Documents/Github/AwesomeProject/out","sourcesContent":["let rev (s: string) =\n    s |> Seq.rev |> Seq.map string |> String.concat \" \""]}

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import * as coreJs from "core-js/shim";
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import * as Util from "./out/fableLib";

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
           {Util.rev("Hello World!")}
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({/* ommitted */});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Note that using the react-native-sm-transformer and the Chrome debugger I do can debug the F# code using the same source map.

Please tell me if you need any more info and thank you very much for your help in advance.

Software versions

• React-Native VS Code extension version: 0.1.6
• VSCode version: 1.4.0
• OS platform and version: OSX 10.11.6
• React Native version: 0.30.0
• react-native-cli: 1.0.0
• fable-compiler: 0.5.10

[MSLaguana]

Thanks for reporting this. It sounds like your source maps are correctly configured, since you say you can set a breakpoint in your .fsx file and have execution stop, we just display the breakpoint location in the bundle rather than the original source. I suspect that this may be because we don't claim to be able to debug fsx files, but we'll need to investigate further.

[forki]

.fsx and .fs files would be needed. Thanks for investigating. This would be
super useful.

Am 30.08.2016 6:48 nachm. schrieb "Jimmy Thomson" <[email protected]

:

Thanks for reporting this. It sounds like your source maps are correctly
configured, since you say you can set a breakpoint in your .fsx file and
have execution stop, we just display the breakpoint location in the bundle
rather than the original source. I suspect that this may be because we
don't claim to be able to debug fsx files, but we'll need to investigate
further.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode-react-native/issues/295#issuecomment-243503615,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADgNNwjMCdOJMAw4zaRylwyAVqXXVKvks5qlF7PgaJpZM4JwVwe
.

[jicongw]

@alfonsogarciacaro We have investigated this issue and found that our extension does not treat .fsx files debug-able. We would have to talk to VS Code team to see if we support this feature.
If you do need to debug .fsx file, here is the workaround:
go to ~/.vscode/extensions/vsmobile.vscode-react-native-0.1.6/package.json
in the debuggers section, add "fsharp" to "languageIds", as shown below

        "debuggers": [
            {
                "type": "reactnative",
                "label": "React Native",
                "program": "./out/debugger/reactNativeDebugEntryPoint.js",
                "runtime": "node",
                "enableBreakpointsFor": {
                    "languageIds": [
                        "fsharp",
                        "javascript",
                        "typescript",
                        "javascriptreact",
                        "typescriptreact"
                    ]
                },

You would also need to make sure that you have fsharp VS code extension installed. Otherwise, it won't know what "fsharp" is.

[alfonsogarciacaro]

Great, thanks for the tip! Of course it'll be much better if VS Code could recognize the breakpoint in the F# source file, but I'll give it a try to the hack and confirm if it's working.

Thanks again for taking the time to look into this issue!

[jicongw]

Hi @alfonsogarciacaro , any luck on the issue?

[alfonsogarciacaro]

Hi @jicongw! Sorry, I kinda forgot about this 😅

I just followed your kind instructions above: edited ~/.vscode/extensions/vsmobile.vscode-react-native-0.1.6/package.json and restarted VS Code (I already have the fsharp extension installed) but unfortunately the result is still the same. Even if I set the break point in fableLib.fsx the debugger stops in index.android.bundle 😕

[jicongw]

No problem. Sorry it did not work for you again.

Here is what I did to get it work.
1) react-native init a new project, npm install fable and react-native-sm-transformer
2) add fable related file and modify index.android.js according to your setup -> to get your example to work on my machine, I also need to make sure the file path in source map matches the path on my machine.
3) perform the hack I described above
4) in vs code, set a breakpoint in fableLib.fsx
5) open cmd, run react-native start --resetCache to clear cache
6) start react-native-sm-transformer by running ./node_modules/.bin/rnst -> this will start the packager, currently we do not have a way of specifying customized arguments to react-native packager
7) in vs code, go to debug tab and in the drop down select "attach to packager"
8) open cmd, run "react-native run-android"
9) on your emulator, you may need to shake the device (cmd+M on mac and control+M on windows) and click debug js remotely.

For incremental change, you would make change in your code, compile and deploy using step 8.

Let me know how it goes.
I can share you a repo if it still does not work for you.
I also have not been able to make it stop in index.android.bundle, which is kinda interesting.
But the steps listed above seem to do the right thing.

[alfonsogarciacaro]

Thanks for the detailed information, @jicongw. I don't have an "attach to packager" target in my launch.json. Could you please post the configuration here?

[jicongw]

@alfonsogarciacaro Here is my launch.json file in .vscode folder under project root directory.

C:\HelloWorld\.vscode\launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Android",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "internalDebuggerPort": 9090,
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "target": "iPhone 5s",
            "internalDebuggerPort": 9090,
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Attach to packager",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "attach",
            "internalDebuggerPort": 9090,
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }
    ]
}

[alfonsogarciacaro]

Fantastic, it's working! :clap:

Of course, it'd be much better if the whole process could be automated, but it's a great start :) Thanks a lot for your help!

[jicongw]

Glad I could help :)
Yeah, I agree with you that it would be much better to automate this whole process. We will definitely get there soon!