How to debug evaluated code?

[some1else]

The errors produced by the eval statement are incomprehensible to me.

I have a dozen or so safe document references in my code. However, one causes an error, and I can't pin point which one it is. The error I'm getting is:

ERROR in ReferenceError: document is not defined
    at Function.t.e (evalmachine.<anonymous>:1:812)
    at Object.getComponent (evalmachine.<anonymous>:1:25003)
    at n (evalmachine.<anonymous>:25:40385)
    at evalmachine.<anonymous>:25:40509
    at evalmachine.<anonymous>:25:19343
    at Array.forEach (native)
    at r (evalmachine.<anonymous>:25:19321)
    at r (evalmachine.<anonymous>:25:40483)
    at n (evalmachine.<anonymous>:25:38302)
    at u (evalmachine.<anonymous>:25:35271)

Unfortunately, those line and character numbers don't even line up with the compiled main.js file.

I had no luck with node --inspect and vm.runInNewContext/vm.runInThisContext.

What is the intended way of debugging this?

[nuclearpidgeon]

I had this problem recently - the way I got around it was by:

1. writing a separate script file that imports/requires the static site rendering bundle and calls the exported render() function manually
2. running this separate script file directly with node --inspect or the VSCode debugger (I had to tweak the source map options in Webpack to get useful stack traces out of VSCode though)

You'll get the same stack trace that the eval() produces, but in a proper debugger UI with sourcemaps :)

For reference, here's the guts of the script I ended up writing:

var staticSite = require('./.tmp/webpack/staticSite.bundle.js');
var staticSiteRenderer =  staticSite.default;
staticSiteRenderer({path: '/'}, function(renderedHtml) {
  console.log("Finished rendering root path!")
  console.log("Output is: " + renderedHtml.length.toString() + " characters long")
  // console.log(renderedHtml)
})