Bug: Source maps don't work with hot reload

[ozgrozer]

In the console I get an output like index.jsx:6 "test1" and that's okay.
But when I save the file, it turns like VM335:18 "test2".
I have to refresh the page to see this one index.jsx:6 "test2".

So source maps don't work unless I refresh the page.

Software	Version(s)
Parcel	1.5.0
Node	9.2.0
npm/Yarn	5.6.0/1.3.2
Operating System	MacOS 10.13.2

[DeMoorJasper]

This is currently the expected behaviour, flagged as feature. This is quite hard with the current implementation of hot module reload

[devongovett]

We evaluate the new code with new Function, so maybe we could generate an inline base64 source map for only the changed asset and put a source mapping URL comment in the code we eval?

[mischnic]

so maybe we could generate an inline base64 source map for only the changed asset and put a source mapping URL comment in the code we eval?

I've got this nearly working, but there is one oddity:

eval(`console.log("test");
console.log("hello");
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNjcmlwdC5qcyJdLCJuYW1lcyI6WyJjb25zb2xlIiwibG9nIl0sIm1hcHBpbmdzIjoiQUFFQUEsT0FBTyxDQUFDQyxHQUFSLENBQVksTUFBWjtBQUlBRCxPQUFPLENBQUNDLEdBQVIsQ0FBWSxPQUFaIiwic291cmNlUm9vdCI6Ii4uIiwic291cmNlc0NvbnRlbnQiOlsiXG5cbmNvbnNvbGUubG9nKFwidGVzdFwiKTtcblxuXG5cbmNvbnNvbGUubG9nKFwiaGVsbG9cIik7Il19`);

correctly prints:

test       script.js:3
hello      script.js:7 

But hmr-runtime uses new Function and

new Function(`console.log("test");
console.log("hello");
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNjcmlwdC5qcyJdLCJuYW1lcyI6WyJjb25zb2xlIiwibG9nIl0sIm1hcHBpbmdzIjoiQUFFQUEsT0FBTyxDQUFDQyxHQUFSLENBQVksTUFBWjtBQUlBRCxPQUFPLENBQUNDLEdBQVIsQ0FBWSxPQUFaIiwic291cmNlUm9vdCI6Ii4uIiwic291cmNlc0NvbnRlbnQiOlsiXG5cbmNvbnNvbGUubG9nKFwidGVzdFwiKTtcblxuXG5cbmNvbnNvbGUubG9nKFwiaGVsbG9cIik7Il19`)();

prints:

test       script.js:7
hello      script.js:7 

https://stackoverflow.com/a/49464959/2352201:

My current attempts at getting this to work in Function constructors is failing, which is a shame- in this case, in both Edge and Chrome, the original source is correctly listed, but it appears that the line number information is broken (the instruction pointer always points to the last line). I am currently investigating this. However, the source map spec does allude to Function constructors containing sourcemaps:

So TLDR:

• Chrome 72 77: doesn't show correct line number, Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=935194 https://bugs.chromium.org/p/chromium/issues/detail?id=109362
• Safari and Firefox 65 67: inline sourcemaps in eval/new Function aren't supported at all

😞

Correct code, but nowhere supported: https://github.com/parcel-bundler/parcel/tree/hmr-sourcemaps-v2

[connorjclark]

@mischnic do you think hmr-runtime could use eval in the meantime?

[connor4312]

Continuing #5313 (comment)

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

Chrome supports this on a protocol level.

Because it's supported there, we have already been able to use function sourcemaps in widely scenarios in VS Code and its JS debugger (for example, vscode has web worker extensions which are all invoked with new Function()).

So if Parcel emitted sourcemaps in this scenario, Parcel users would be able to successfully debug using HMR in VS Code. And it puts a little pressure on the chrome devtools team to implement support for it within their UI 🙂

[mischnic]

Firefox nor Chrome support sourcemap

Neither of them actually show the correct line, but they do try to map something.

WIP PR: #5316

[connor4312]

Thanks for looking at this, let me know if you'd like me to lend a hand with anything 🙂

[mischnic]

A workaround for the browser bugs would be somehow evaluating the new code via a <script> tag.

[webcodion]

Hi!

This is still an issue for me. Page reload prints:

HMR prints:

Any workaround for this?

Webpack HMR works correctly.

Thank you!

[devongovett]

Investigated this a bit. There are some challenges here. The situation hasn't changed much since @mischnic commented in 2019. Chrome and Firefox support sourceMappingURL and sourceURL in eval, but not in new Function. So we can do something like this to work around that:

let id = '_' + Math.random().toString(36).slice(4);
(0, eval)(`function ${id}(require, module, exports) {${asset.output}}`);
let fn = window[id];
delete window[id];

Unfortunately, while Safari seems to support this as well for console calls, it does not set stack traces to use the right source URLs. https://bugs.webkit.org/show_bug.cgi?id=137297

I think the only option then would be to load a <script> element over HTTP (inline scripts also have the same problem in Safari). But that means the HMR runtime would need to become async, which would be a big change. Rather than sending the content of the updated modules over the web socket and evaluating, we'd need to send an update via web socket, and then download a script before applying the updates. Not sure how much that would affect performance as well...