Next + SWC appear to generate incorrect sourcemaps

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.14.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.2.6-canary.2
      eslint-config-next: N/A
      react: 0.0.0-experimental-e7d0053e6-20220325
      react-dom: 0.0.0-experimental-e7d0053e6-20220325

What browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

Vercel, but N/A

Describe the Bug

Next generates different sourcemaps when we switch between using Babel to transpile our code, and SWC. The SWC sourcemaps are incorrect - the mapped output differs from the original source code by a few lines, causing incorrect debugging behavior.

We build https://replay.io , a time-travel debugger for JS. The Replay client uses sourcemaps on both the backend and frontend to parse and display info about the recorded application. In turn, we frequently record replays of our own client app to debug how it’s working.

I’ve made two replays of our codebase built with Next 12.2.6-canary.2 , switching only between using Babel and SWC to transpile:

• Babel: https://app.replay.io/recording/replay-next-1226-canary2-babel–e55cb64a-aea9-400b-98d3-f3b5ad3525b7
• SWC: https://app.replay.io/recording/replay-next-1226-canary2-swc–8272ce14-288f-4076-93fb-45f22c562c8f

If you open up debugger/src/actions/event-listeners.ts in both files, you can see that the Babel file correctly maps all of the lines that were hit:

In the SWC-built version, the line hit info is off by 3-4 lines.

If you open up the sourcemap visualizer tool for both versions, the Babel version is correct:

• https://app.replay.io/recording/replay-next-1226-canary2-babel--e55cb64a-aea9-400b-98d3-f3b5ad3525b7/sourcemap/o999

and the SWC version is wrong:

• https://app.replay.io/recording/replay-next-1226-canary2-swc--8272ce14-288f-4076-93fb-45f22c562c8f/sourcemap/o995

Expected Behavior

Using SWC to compile our application would generate sourcemaps that accurately map the original source.

Link to reproduction

https://github.com/replayio/devtools/tree/bugfix/FE-434-next-sourcemaps

To Reproduce

1. Clone https://github.com/replayio/devtools
2. Check out commit https://github.com/replayio/devtools/commit/61605c25401897a3486545111e5f9157ef5e3886 , part of the bugfix/FE-434-next-sourcemaps branch.
3. Run yarn to install
4. Use Babel to build the app: yarn build, and check the build output + sourcemaps
5. Check out the tip of the bugfix/FE-434-next-sourcemaps branch, which just disables .babelrc to use SWC for building
6. Use SWC to build the app: yarnbuild, and check the build output + sourcemaps

[jridgewell]

This should be resolved with https://github.com/swc-project/swc/pull/6561, though that’ll need to be rolled into the next release.

[markerikson]

Thank you! We’re still on Next 12 atm, but I’ll try upgrading soon and see what happens.