@swc/core version 1.3.4 and later is generating invalid sourcemaps when webpack + swc-loader used

[shiftkey]

Describe the bug

Sample project working with @swc/core v1.3.3: https://github.com/shiftkey/swc-ts-webpack-sourcemap-repro

npm i
npm run webpack:old
npm run webpack:new

These steps use different tools for validating the sourcemap file on disk to ensure we don't ship malformed sourcemaps to the browser. old uses https://www.npmjs.com/package/sourcemap-validator and new uses https://www.npmjs.com/package/source-map.

But since @swc/[email protected] or later the generated sourcemaps are no longer valid:

npm install --include=dev @swc/[email protected]
npm run webpack:old   // fails 💥 
npm run webpack:new   // fails 💥 

I've also attached testing the swc command line tool which is valid for both cases:

npm run cli:old
npm run cli:new

Input code

See attached repository for small React application.

src/app.tsx

export function App() {
    return <>TODO</>
}

src/index.tsx

import {render} from 'react-dom'
import {App} from './app'

const appContainer = document.getElementById('project-root')

render(<App />, appContainer)

Config

{
    "$schema": "https://json.schemastore.org/swcrc",
    "jsc": {
        "target": "es2020",
        "parser": {
          "syntax": "typescript",
          "tsx": true
        },
        "transform": {
          "react": {
            "runtime": "automatic",
            "useBuiltins": true
          }
        }
    },
    "minify": false
  }

Playground link

No response

Expected behavior

Generated sourcemaps after bundling do not have invalid mappings

Actual behavior

Output from npm run webpack:old with updated @swc/core:

> [email protected] validate:webpack
> node script/validate.js dist/webpack/

💥 Error for sourcemap at /Users/shiftkey/src/swc-ts-webpack-sourcemap-repro/dist/webpack/main.bundle.js.map encountered
/Users/shiftkey/src/swc-ts-webpack-sourcemap-repro/script/validate.js:59
      throw error;
      ^

Error: Warning: mismatched names
Expected: App || 'App' || 'App' || "App" || "App"
Got:  /> ||  />,  ||  />,  ||  />,  ||  />, 
Original Line: render(<App />, appContainer)
Mapping: 2:138079→6:11 "App" in webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx
    at /Users/shiftkey/src/swc-ts-webpack-sourcemap-repro/node_modules/sourcemap-validator/index.js:153:17
    ...

Output from npm run webpack:new with updated @swc/core:

Validating bundle /Users/shiftkey/src/swc-ts-webpack-sourcemap-repro/dist/webpack/main.bundle.js
Validating sourcemap /Users/shiftkey/src/swc-ts-webpack-sourcemap-repro/dist/webpack/main.bundle.js.map
✅ No errors found
💥 Warnings found:
 - BadColumnError found {
  message: 'Expected token not in correct location',
  source: 'webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx',
  token: '/>',
  expected: 'App'
}
Context {
  originalContext: [
    [
      4,
      "const appContainer = document.getElementById('project-root')"
    ],
    [ 5, '' ],
    [ 6, 'render(<App />, appContainer)' ]
  ],
  originalColumn: 11,
  originalLine: 6,
  generatedColumn: 138079,
  generatedLine: 2,
  generatedContext: 'mentById("project-root");(0,n.render)((0,e.jsx)(r,{}),l)})()})();'
}

 - BadColumnError found {
  message: 'Expected token not in correct location',
  source: 'webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx',
  token: '/>',
  expected: 'App'
}
Context {
  originalContext: [
    [
      4,
      "const appContainer = document.getElementById('project-root')"
    ],
    [ 5, '' ],
    [ 6, 'render(<App />, appContainer)' ]
  ],
  originalColumn: 11,
  originalLine: 6,
  generatedColumn: 138080,
  generatedLine: 2,
  generatedContext: 'entById("project-root");(0,n.render)((0,e.jsx)(r,{}),l)})()})();'
}

Version

@swc/core 1.3.4 or later

Additional context

No response

[shiftkey]

The changelog for 1.3.4 mentions #5657 but I'm not familiar enough with the internals to understand how that change might have affected my repro...

[mattcosta7]

@kdy1 it doesn't seem like this was fixed with the latest version of swc/core + swc-loader?

[kdy1]

Seems like #5657 is the cause

[kdy1]

Hmm... I'll diff with v1.3.3

[kdy1]

Investigation: The problem is that the new source map has name when it should not

[kdy1]

I concluded that this is not a bug of swc.

Source map visualized

Full source map

Dumped source map using https://pastcompute.github.io/ScriptMapper/

../../input/index.tsx,1,0,1,0,null
../../input/index.tsx,2,0,1,0,null
../../input/index.tsx,2,9,1,8,render
../../input/index.tsx,2,15,1,14,null
../../input/index.tsx,2,23,1,21,null
../../input/index.tsx,2,35,1,32,null
../../input/index.tsx,3,0,2,0,null
../../input/index.tsx,3,9,2,8,App
../../input/index.tsx,3,12,2,11,null
../../input/index.tsx,3,20,2,18,null
../../input/index.tsx,3,28,2,25,null
../../input/index.tsx,4,0,4,0,null
../../input/index.tsx,4,6,4,6,appContainer
../../input/index.tsx,4,21,4,21,document
../../input/index.tsx,4,30,4,30,getElementById
../../input/index.tsx,4,44,4,44,null
../../input/index.tsx,4,45,4,45,null
../../input/index.tsx,5,0,6,0,render
../../input/index.tsx,5,21,6,7,null
../../input/index.tsx,5,26,6,8,App
../../input/index.tsx,5,36,6,16,appContainer

As you can see, mappings are correct. (i.e. It does not have two App for <App />)

Additionally, by using patch section of cargo, I verified that the source map for repro and unit test is identical.

dbg!()

[crates/swc/src/lib.rs:458] &source_map_names = {
    BytePos(
        91,
    ): Atom('getElementById' type=dynamic),
    BytePos(
        131,
    ): Atom('App' type=inline),
    BytePos(
        9,
    ): Atom('render' type=inline),
    BytePos(
        123,
    ): Atom('render' type=inline),
    BytePos(
        82,
    ): Atom('document' type=static),
    BytePos(
        139,
    ): Atom('appContainer' type=dynamic),
    BytePos(
        42,
    ): Atom('App' type=inline),
    BytePos(
        67,
    ): Atom('appContainer' type=dynamic),
}

[crates/swc/src/lib.rs:510] &src_map_buf = [
    (
        BytePos(
            1,
        ),
        LineCol {
            line: 0,
            col: 0,
        },
    ),
    (
        BytePos(
            1,
        ),
        LineCol {
            line: 1,
            col: 0,
        },
    ),
    (
        BytePos(
            9,
        ),
        LineCol {
            line: 1,
            col: 9,
        },
    ),
    (
        BytePos(
            15,
        ),
        LineCol {
            line: 1,
            col: 15,
        },
    ),
    (
        BytePos(
            22,
        ),
        LineCol {
            line: 1,
            col: 23,
        },
    ),
    (
        BytePos(
            33,
        ),
        LineCol {
            line: 1,
            col: 35,
        },
    ),
    (
        BytePos(
            34,
        ),
        LineCol {
            line: 2,
            col: 0,
        },
    ),
    (
        BytePos(
            42,
        ),
        LineCol {
            line: 2,
            col: 9,
        },
    ),
    (
        BytePos(
            45,
        ),
        LineCol {
            line: 2,
            col: 12,
        },
    ),
    (
        BytePos(
            52,
        ),
        LineCol {
            line: 2,
            col: 20,
        },
    ),
    (
        BytePos(
            59,
        ),
        LineCol {
            line: 2,
            col: 28,
        },
    ),
    (
        BytePos(
            61,
        ),
        LineCol {
            line: 3,
            col: 0,
        },
    ),
    (
        BytePos(
            67,
        ),
        LineCol {
            line: 3,
            col: 6,
        },
    ),
    (
        BytePos(
            82,
        ),
        LineCol {
            line: 3,
            col: 21,
        },
    ),
    (
        BytePos(
            91,
        ),
        LineCol {
            line: 3,
            col: 30,
        },
    ),
    (
        BytePos(
            105,
        ),
        LineCol {
            line: 3,
            col: 44,
        },
    ),
    (
        BytePos(
            106,
        ),
        LineCol {
            line: 3,
            col: 45,
        },
    ),
    (
        BytePos(
            123,
        ),
        LineCol {
            line: 4,
            col: 0,
        },
    ),
    (
        BytePos(
            130,
        ),
        LineCol {
            line: 4,
            col: 21,
        },
    ),
    (
        BytePos(
            131,
        ),
        LineCol {
            line: 4,
            col: 26,
        },
    ),
    (
        BytePos(
            139,
        ),
        LineCol {
            line: 4,
            col: 36,
        },
    ),
]

[kdy1]

I'll close this issue with a PR adding tests

[kdy1]

Additionally, to help error reporting to webpack, this is the wrong, final source map.

webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,520,0,1,0,null
webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,521,0,1,7,null
webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,521,9,1,16,App
webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,521,15,1,22,null
webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,522,4,2,4,null
webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,522,25,2,11,null
webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,523,18,2,13,null
webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,525,0,3,0,null
webpack://swc-ts-webpack-sourcemap-repro/src/app.tsx,525,1,3,1,null
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,528,0,1,0,null
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,529,0,1,32,null
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,530,0,2,25,null
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,531,0,4,0,null
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,531,6,4,6,appContainer
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,531,21,4,21,document
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,531,30,4,30,getElementById
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,531,44,4,44,null
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,531,45,4,45,null
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,532,0,6,0,render
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,532,20,6,6,render
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,532,35,6,7,null
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,532,55,6,8,App
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,532,58,6,11,App
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,532,65,6,16,appContainer

The problem is

webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,532,55,6,8,App
webpack://swc-ts-webpack-sourcemap-repro/src/index.tsx,532,58,6,11,App

but this is not generated by swc.

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.