Misaligned source maps

[bhellema]

🐛 bug report

When debugging the source, the debugger is not lining up with source maps.

Unfortunately, I don't have much to provide as a sample to help reproduce the issue. I figure I'll log the ticket in case other developers are also experiencing the same issue.

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

No .babelrc file in our project.

    "parcel": "2.0.0-rc.0",

parcel serve ./public/index.html

🤔 Expected Behavior

The debugger in chrome should allow you to step through the source code in a logical order.

😯 Current Behavior

The source code doesn't line up with the debugger.

debug-bad-sm.mp4

Here is another capture:

💁 Possible Solution

🤷 - not sure there is one at the current time.

🔦 Context

Just trying to debug the source, preventing us from any effective development.

💻 Code Sample

Of course, this is a private corporate application for which I can't share the source code. However, @devongovett has access if needed.

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-rc0
Node	v14.15.4
npm/Yarn	1.22.10
Operating System	MacOS Catalina 10.15.7

[devongovett]

I inspected the source maps in a visualizer and they seemed right to me, but @bhellema mentioned to me in Slack that it seemed like the source maps got worse (i.e. off by more lines) after each save, which sounds strange. @DeMoorJasper have you ever seen anything like that?

[DeMoorJasper]

@DeMoorJasper have you ever seen anything like that?

Not really, it should work after a page refresh, hmr is broken though but that's unfortunately largely a browser issue.

Does it still happen after a page refresh?

[bhellema]

Yes, unfortunately after a full refresh, cache clear, we still have difficulty debugging with accurate line numbers.

[bhellema]

We've taken a crack at using a .parcelrc file and no .babelrc file. In the .parcelrc file we specify:

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

When we use the above configuration we get correct debugging as seen in the image below:

There is still an issue where we're not seeing the "actual" TS source. This source must be an intermediate step that looks to match up with the source maps. Is this a hint of what might be going on? Could the source maps have been generated off the wrong "source"?

[johndanek]

I've run into this issue and have had to turn off "Enable JavaScript source maps" in Chrome Debugger Tools -> Settings for now. Debugger Tools also seems unable to get the most recent version of a Parcel build- the source map only shows old versions even if I delete my parcel build dir and rebuild. Disabled source maps is a bit annoying but it gets me to the correct line of code fast, albeit in a large compiled file.

[devongovett]

@johndanek anything you could share about your setup that could help us reproduce?

[johndanek]

@devongovett Unfortunately, I'm not even sure of what details to add. I just tried flipping sourcemaps back on, and the same issue persists. If I add a "debugger" directive, the Chrome debugger will stop at that line, but the debugger is not shown in the source, so off the bat everything is off by one line.

[wushufen]

真难用！

I have the same problem.
This is a bug.
I think because the file has been updated, but the map file does not updated.
Because their filename (file and it's map file) aways same, though their content has been update.
And browser has cache!

[MirekPapirnik]

I have the same error using Parcel 2 and TS. Minimal repro steps:

package.json

{
  "scripts": {
    "start": "parcel ./index.html"
  },
  "devDependencies": {
    "@parcel/config-default": "^2.0.1",
    "@parcel/transformer-typescript-tsc": "^2.0.1",
    "parcel": "^2.0.1",
    "typescript": "^4.4.4"
  }
}

.parcelrc

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

Output:

Disabling source maps using parcel serve --no-source-maps fixes the error pointer position.

On a larger project, the pointer moves 7 lines and the error is not visible in the Sentry. 🤨

[micrology]

I have the same problem, and I am using vanilla JavaScript (no typeScript), no .parcelrc, parcel v2 'out of the box'. The misalignment goes away if I turn off "Enable JavaScript source maps" in Chrome Debugger Tools -> Settings, and reappears when I turn it on again.

A possible clue is that with 'Enable JavaScript source maps" off, a sample few lines of code looks like this:

/* --------------------------------------- avatars and shared cursors--------------------------------*/ /**
 *  set up user monitoring (awareness)
 */ function setUpAwareness() {

and with it on, looks like this:

/* --------------------------------------- avatars and shared cursors--------------------------------*/
/**
 *  set up user monitoring (awareness)
 */
function setUpAwareness() {

Note the positions of the /** and the */ before the function. It seems that some newline characters are getting lost.

[mischnic]

That in itself doesn't seems to cause a problem, the sourcemap maps that correctly.

[sclaflin]

Same problem with just ES6 and a vanilla parcel install. For me the issue occurs with backtick'ed strings. The more lines between the back ticks, the further off the sourcemap is.

const foo = 'foo';

console.log(`

${foo}

`);

//Should be able to set a breakpoint below, but can't. (sadface)
console.log('Hi');

[mischnic]

@sclaflin I've just tested this and it was apparently a bug in swc. Will be fixed with #7487.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.