Debugging React Native with Node shims in VS Code

Question

I have a React Native project (created from the Ignite CLI 2.0.0 default boilerplate) that needs some dependencies on node-based packages.

So, I created a transformers.js, babel-transform.js and a rn-cli.js according to ReactNativify. This is basically equivalent to what's in a normal .babelrc file and uses babel-plugin-rewrite-require to swap out Node objects and replace them either with Browserify shims, or empty mocks. So far, so good.

Now the problem is debugging this in Visual Studio Code (1.13.1). I've had a significant adventure (or horror story, if you will) with RN debugging already, but thought to have it running after downgrading Node to 7.10.1.

Everything seems to go well, does halt on breakpoints, steps through code, etc., however this is the actual code not the transpiled output with the shims in place! Furthermore breakpoints open in a read-only code window that has no code indentation.

My debug configuration is:

    {
        "type": "node",
        "request": "launch",
        "name": "Launch Tests",
        "program": "${workspaceRoot}/node_modules/.bin/jest",
        "args": [
            "--runInBand",
            "--no-cache"
        ]
        // Not needed, but tried ;)
        //  "runtimeArgs": [
        //     "--debug-brk=127.0.0.1:5858"
        //  ],
        //  "port": 5858
    }

Does anyone have similar, hopefully better experience with this?

PS. There may be a vscode github issue (#26782) related to this.

**PS** Those interested in using ReactNativify should beware of some issues, which I described in this SO answer: [Can we use nodejs code inside react native application?](https://stackoverflow.com/questions/40629856/can-we-use-nodejs-code-inside-react-native-application/45207249#45207249) — Arnold Schrijver, Jul 20 '17 at 07:04
**Note**: Shimming was not viable, now looking into [Viable options for running NodeJS on Android (Aug 2017)](https://stackoverflow.com/a/45649995/8295283) — Arnold Schrijver, Aug 12 '17 at 19:32

Arnold Schrijver · Accepted Answer · 2017-07-17T15:45:57.357

In my question I bumped into 2 problems.

The first one, tests performing against actual code, appeared to be an issue with Jest. The Jest team stated:

This is the expected behavior. Jest is supposed to run on source files. On any large codebase, generating a bundle before running tests is too slow, so Jest compiles files just-in-time, which makes it fast.

Now this is probably a miscommunication and you can use it with proper babel-jest configuration to do dynamic transforms, I did not receive further help from the team. So I decided to go for a different test platform (either Mocha, Jasmine and/or Karma).

If you want to try your luck with Jest you can follow up on this thread: https://github.com/facebook/jest/issues/4028

The second problem, code opening in a read-only panel in VS during debugging sessions, is an open issue being processed by Microsoft. You can check progress here: https://github.com/Microsoft/vscode/issues/26782

[Update: I just received further instruction from the Jest team:

@aschrijver the general way Jest handles this is by doing the transpilation itself. So you set up transformers in your config that Jest itself uses to do the transpilation.

https://facebook.github.io/jest/docs/configuration.html#transform-object-string-string

An example config for Typescript is here to give you an idea of what this could look like: https://github.com/kulshekhar/ts-jest

In terms of shims, what I think you might be wanting are actually Jest mocks. A Jest mock can step in instead of an actual module when you import or require it.

]

Debugging React Native with Node shims in VS Code

1 Answers1

Linked