Browser source map bugs

This page documents some browser source map bugs we discovered. See https://github.com/evanw/esbuild/issues/209 for more context about this test.

Test details

This test contains two files bundled together. The first file is called entry.ts and looks like this:

import React from "react"
import { render } from "react-dom"
import { log } from "./other"
const str = "esbuild"
console.log('inside ' + new URL(document.currentScript.src).pathname)
log(str)
render(React.createElement("div"), document.body)

The second file is called other.ts and looks like this:

export function log(a: any) {
  console.trace(a);
}

The test contains two bundles, one minified and one unminified. If the browser doesn't have source map bugs, the unminified and minified calls to console.trace() should produce exactly the same stack trace in the browser's developer tools.

Running the test

Open up your browser console. If your browser doesn't have source map bugs, you should see something like this:

inside /out.js
esbuild
    log         other.ts:2
    (anonymous) entry.ts:6
inside /out.min.js
esbuild
    Mf          other.ts:2
    (anonymous) entry.ts:6

✅ Firefox 77.0.1

Firefox can display the minified source map correctly:

inside /out.js
console.trace() esbuild
    log         other.ts:2
    <anonymous> entry.ts:6
    <anonymous> out.js:6758
inside /out.min.js
console.trace() esbuild
    Mf          other.ts:2 ✅
    <anonymous> entry.ts:6 ✅
    <anonymous> entry.ts:7

🚫 Safari 13.1.1

Safari is buggy and can't display the minified source map correctly:

inside /out.js (out.js, line 6755)
Trace: esbuild
    log                  - other.ts:2
    (anonymous function) - entry.ts:6
    Global Code          - entry.ts:7
inside /out.min.js (out.min.js, line 4)
Trace: esbuild
    Mf                   - entry.ts:7 🚫
    (anonymous function) - entry.ts:7 🚫
    Global Code          - entry.ts:7

It's buggy because the source locations are incorrectly attributed to entry.ts:7 instead of other.ts:2 and entry.ts:6.

🚫 Chrome 83.0.4103.116

Chrome is buggy and can't display the minified source map correctly:

inside /out.js
esbuild
    log         @ other.ts:2
    (anonymous) @ entry.ts:6
    (anonymous) @ entry.ts:7
inside /out.min.js
esbuild
    Mf          @ react-dom.production.min.js:244 🚫
    (anonymous) @ react-dom.production.min.js:244 🚫
    (anonymous) @ react-dom.production.min.js:244
  

It's buggy because the source locations are incorrectly attributed to react-dom.production.min.js instead of other.ts and entry.ts.

This bug happens because Chrome incorrectly uses a column offset of 0 instead of the real column offset to query the source map. This bug was fixed in commit a10679b and the issue no longer happens in the latest Chrome Canary.