HMR assets lack sourcemaps

[connor4312]

🙋 feature request

Scripts which come in through HMR lack sourcemaps. This makes them difficult to debug in the browser, and even more so in a debugger that's based on a physical filesystems like VS Code's debugger.

🤔 Expected Behavior

Assets served via HMR should have their own updated sourcemaps for the compiled code.

😯 Current Behavior

I see js be served down the websocket

The code served in this way doesn't have a sourcemap. From a debugger's POV, this is what we see -- we can tell that an HMR happened, but have no mapping so can't help the user debug from their sources.

Sample information sent from the browser for the HMR script:

{
  "method": "Debugger.scriptParsed",
  "params": {
    "scriptId": "6",
    "url": "",
    "startLine": 0,
    "startColumn": 0,
    "endLine": 86,
    "endColumn": 2,
    "executionContextId": 2,
    "hash": "0874189a9237cbd37b6bf579538b20f848ddfef6",
    "executionContextAuxData": {
      "isDefault": true,
      "type": "default",
      "frameId": "E4C774308D04EB26E42886642D446264"
    },
    "isLiveEdit": false,
    "sourceMapURL": "",
    "hasSourceURL": false,
    "isModule": false,
    "length": 4234,
    "stackTrace": {
      "callFrames": [
        {
          "functionName": "hmrApply",
          "scriptId": "5",
          "url": "http://localhost:20243/react-parcel.e31bb0bc.js",
          "lineNumber": 29998,
          "columnNumber": 13
        }
      ]
    },
    "scriptLanguage": "JavaScript",
    "embedderName": ""
  },
  "sessionId": "48BB3014EF887F2DA66E32FED5FB8D7D"
}

For comparison, the original bundle parse event, notice the presence of a sourceMapURL:

{
  "method": "Debugger.scriptParsed",
  "params": {
    "scriptId": "5",
    "url": "http://localhost:20243/react-parcel.e31bb0bc.js",
    "startLine": 0,
    "startColumn": 0,
    "endLine": 30061,
    "endColumn": 50,
    "executionContextId": 2,
    "hash": "2aabbcd301cff4b02b3b474146f8f5be53df57cb",
    "executionContextAuxData": {
      "isDefault": true,
      "type": "default",
      "frameId": "E4C774308D04EB26E42886642D446264"
    },
    "isLiveEdit": false,
    "sourceMapURL": "/react-parcel.e31bb0bc.js.map",
    "hasSourceURL": false,
    "isModule": false,
    "length": 1115075,
    "scriptLanguage": "JavaScript",
    "embedderName": "http://localhost:20243/react-parcel.e31bb0bc.js"
  },
  "sessionId": "48BB3014EF887F2DA66E32FED5FB8D7D"
}

💁 Possible Solution

Include a source map for the HMR module 🙂 Maybe there's already a way to do this somehow, but I don't see it in the HMR docs (and if there is a way, perhaps it should be the default?)

🔦 Context

I work on the VS Code JS debugger. We had a long standing issue (microsoft/vscode-js-debug#843) to ensure parcel hmr is supported, but this is a blocker for that right now.

💻 Examples

https://github.com/jaredpalmer/react-parcel-example is a sample app, but you can use any

[mischnic]

Duplicate of #643 (comment)

As far as I can tell, neither Firefox nor Chrome support sourcemap comments in new Function() at this point