parcel: V2: inline source maps are malformed

🐛 bug report

When inspecting TS files generated with inline source maps in chrome debugger - the mapping turns out to be absolutely wrong.

🎛 Configuration (.babelrc, package.json, cli command)

.parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
  }
}

package.json

  "targets": {
    "default": {
      "sourceMap": {
        "inline": true,
        "inlineSources": true
      }
    }
  },

🤔 Expected Behavior

Chrome Debugger Sources panel works as intented.

😯 Current Behavior

Ignore code meaning; pay attention to line numbers

One thing: I cannot set breakpoints in valid places; you can see that many lines are greyed out: 44, 48, 51. If I put a breakpoint on line 47, for example, - it would break execution on some absolutely different part of code than line 47!

Second thing: line 44 - console.log(123);. It references absolutely different line number when printing to console:

💁 Possible Solution

🔦 Context

This is the background script of chrome extn.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	`^2.0.0-nightly.574`

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 21 (10 by maintainers)

Most upvoted comments

(This isn’t specific to inline sourcemaps)

https://github.com/parcel-bundler/parcel/tree/5815-ts-sourcemap seems to fix it for --no-scope-hoist (= and development). But the maps with scope-hoisting is still broken as before.

Actually, this workaround isnt applicable to parcel serve - since there is no --no-scope-hoist option. (I have this bug in development as well)

avalanche1 on Feb 14, 2021

Just wanted to add that I have this same issue with parcel serve as well. In addition to having incorrect line numbers, there seems to be a variable scoping issue of some sort making the chrome debugger behave real awkward to use. I’ve had cases like this one where within the same function I had item 3 times with different values making it impossible to debug.

AlexPoirier1 on Mar 17, 2021

(This isn’t specific to inline sourcemaps)

https://github.com/parcel-bundler/parcel/tree/5815-ts-sourcemap seems to fix it for --no-scope-hoist (= and development). But the maps with scope-hoisting is still broken as before.

mischnic on Feb 10, 2021

@mischnic

After some heavy debugging I figured out. If you are using Template literals (``) the source map is completely broken.

index.ts

 console.log("test1") // line 1 correct

let text = `
    1
    1
    1
    1
    1
    1
    `

console.log("test2") // this should be line 12, instead 17 in devtools

let test0
let test1

console.log("test3")  // this only woks because last line if you add more content it wont work

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script src="./index.ts"></script>
	</body>
</html>

Devtools

Levminer on Jul 12, 2022

I have the same issue “avalanche1” posted on Feb 10 - “I cannot set breakpoints in valid places; you can see that many lines are greyed out. If I put a breakpoint on non-grayed out lines, it would break execution on some absolutely different part of code!”

I am using parcel 2.0.1 (the latest version of parcel 2) to build a react application with typescript, and started the application by running “parcel serve index.html”. I tried to install parcel@2.0.0-nightly.574, but when running parcel build, it would automatically install @parcel/transformer-typescript-tsc @2.0.1, which then complains a unmatched version with parcel@2.0.0-nightly.574.

So in summary, debug typescript source code with source map doesn’t work with parcel 2.0.1. Could you please help on this? Thanks.

pingxiong620 on Dec 6, 2021

That should already be fixed in the latest nightly: #6024

I can confirm that the nightly solved the problem.

jgainfort on Apr 2, 2021