V2: inline source maps are malformed

[avalanche1]

🐛 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

[mischnic]

Indeed, with this simple test (using the tsc transformer)

<script src="a.ts"></script>

a.ts:

import "./b";


console.log("a")

b.ts

// ....



console.log("b");

it seems that the sourcemaps reflect the tsc output (where the empty lines are stripped). So somehow we aren't applying the sourcemaps that come out of tsc.

cc @DeMoorJasper

[mischnic]

(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.

[avalanche1]

seems to fix it for --no-scope-hoist

And I can't use --no-scope-hoist due to #5788 (comment)

[mischnic]

@DeMoorJasper is babel/babel#12471 needed to get scope hoisting working? Or does that have nothing to do with this?

[DeMoorJasper]

@mischnic yes, I think that would be the easiest way to get it working

[avalanche1]

(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)

[danieltroger]

@avalanche1 you beat me to reporting this bug just like #5788 xD

I'm not sure if I'm having the same issue though and it is much broader than assumed or if I'm suffering from a similar one.

First off: I have also noticed inline sourcemaps being off in chrome. The code in the debugger is however displaced by default in firefox in the context where my scripts run so I assumed that chrome simply also was incapable and gave up because reporting bugs to browsers doesn't seem to do anything.
So if this is a parcel issue that's great, because it means it will actually be fixed one day :)

BUT: I don't use TSC, I use babel's typescript transform. So if this is a parcel issue but only when using tsc something more is wrong.

My real problem is that the sourcemaps from my ie11-transpiled code in production are displaced in sentry, making it - along with the transpilation of async functions - nearly impossible to understand what's happening.

I don't get any stack traces for errors in my modern scripts in sentry because running all code in "new Function" is an eDge cAsE, so the normal stack traces being off is a big deal.

I thought that the issue was on sentry's side, but they think it's on parcel:

Thank you for your patience here, Daniel. I ended up escalated the
issue further to the team, as typically an issues with line numbers
being wrong is caused by either the files being edited after the
source maps are uploaded to Sentry and/or the webpack plugin not being
last. But this does not seem to be the case here. And checking the
displaced locations with source-map-cli, we got the same result as
Sentry did when processing the events.

This does seem to be an issue with Parcel like you suspected it might
be, but unfortunately, we're not able to track down a specific cause
in Parcel for the behavior. I recommend reaching out to their team to
see if they can provide insight on why the displacement is occurring
but only for certain issues.

This was my "parcel configuration" that I sent them: https://arxius.io/f/3b4406cf

Is it possible that the issue also exists without tsc or am I suffering from a different issue? How can I help you reproduce it, if so?

[avalanche1]

You asking Me or the Maintainers?

Is it possible that the issue also exists without tsc or am I suffering from a different issue? How can I help you reproduce it, if so?

[danieltroger]

The maintainers

[AlexPoirier1]

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.

[jgainfort]

For beta.2 parcel serve creates invalid sourcemap.

DevTools failed to load SourceMap: Could not parse content for http://localhost:8080/index.135f32bc.js.map: Unexpected token < in JSON at position 0

If I run parcel build, sourceMaps are fine.

I checked against beta.1 and parcel serve sourceMaps work as expected.

[jgainfort]

Should I raise a separate issue? This seems similar to me but not sure.

[mischnic]

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

[jgainfort]

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

I can confirm that the nightly solved the problem.

[pingxiong620]

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.

[mischnic]

If anyone still has this problem: please post a code sample so that we can reproduce this.

[takkuumi]

@mischnic

// package.json

{
  "name": "tsparcel",
  "version": "1.0.0",
  "description": "parcel demo",
  "author": "Ling",
  "license": "MIT",
  "private": true,
  "scripts": {
    "clean:output": "rm -fr ./built",
    "dev": "yarn clean:output && parcel public/index.html --public-url / --dist-dir built",
    "build": "yarn clean:output && parcel build",
    "lint": "yarn lint:script && yarn lint:style",
    "lint:script": "eslint src typings --fix",
    "lint:style": "stylelint src/**/*.{css,less} --fix",
    "setup": "yarn pack:wasm-security",
    "pack:wasm-security": "wasm-pack build crates/wasm-security --release --target web --out-dir=../../plugins/wasm-security"
  },
  "dependencies": {
    "@antv/g6": "^4.5.2",
    "@antv/x6": "^1.29.5",
    "@editorjs/editorjs": "^2.22.2",
    "@editorjs/header": "^2.6.2",
    "@types/editorjs__header": "^2.6.0",
    "axios": "^0.24.0",
    "dotenv": "^11.0.0",
    "uuid": "^8.3.2",
    "vue": "^3.2.26",
    "vue-router": "^4.0.12",
    "wasm-security": "link:./plugins/wasm-security"
  },
  "devDependencies": {
    "@parcel/compressor-brotli": "^2.2.0",
    "@parcel/compressor-gzip": "^2.2.0",
    "@parcel/optimizer-css": "^2.2.0",
    "@parcel/optimizer-esbuild": "^2.2.0",
    "@parcel/packager-css": "^2.2.0",
    "@parcel/resolver-glob": "^2.2.0",
    "@parcel/transformer-css-experimental": "^2.2.0",
    "@parcel/transformer-image": "^2.2.0",
    "@parcel/transformer-less": "^2.2.0",
    "@parcel/transformer-typescript-tsc": "^2.2.0",
    "@parcel/transformer-vue": "^2.2.0",
    "@parcel/validator-typescript": "^2.2.0",
    "@types/node": "^17.0.8",
    "@typescript-eslint/eslint-plugin": "^5.9.1",
    "@typescript-eslint/parser": "^5.9.1",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "autoprefixer": "^10.4.2",
    "browserslist": "^4.19.1",
    "cssnano": "^5.0.15",
    "eslint": "^8.6.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-parcel2": "^1.0.1",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-vue": "^8.3.0",
    "less": "^4.1.2",
    "parcel": "^2.2.0",
    "postcss": "^8.4.5",
    "postcss-cli": "^9.1.0",
    "postcss-custom-properties": "^12.1.2",
    "postcss-import": "^14.0.2",
    "postcss-less": "^6.0.0",
    "postcss-sorting": "^7.0.1",
    "postcss-url": "^10.1.3",
    "prettier": "^2.5.1",
    "stylelint": "^14.2.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-order": "^5.0.0",
    "terser": "^5.10.0",
    "typescript": "^4.5.4"
  },
  "alias": {
    "@assets/*": "./src/assets/$1",
    "@client/*": "./src/client/$1",
    "@components/*": "./src/components/$1",
    "@foundation/*": "./src/foundation/$1",
    "@i18n/*": "./src/i18n/$1",
    "@net/*": "./src/net/$1",
    "@shared/*": "./src/shared/$1"
  },
  "engines": {
    "node": ">=17"
  }
}

// parcelrc

{
  "extends": "@parcel/config-default",
  "resolvers": [
    "@parcel/resolver-glob",
    "..."
  ],
  "transformers": {
    "*.{ts,tsx}": [
      "@parcel/transformer-typescript-tsc"
    ],
    "arraybuffer:*": [
      "parcel-transformer-arraybuffer"
    ],
    "*.svg": [
      "@parcel/transformer-svg"
    ],
    "*.less": [
      "@parcel/transformer-less"
    ],
    "*.css": [
      "@parcel/transformer-css-experimental"
    ]
  },
  "validators": {
    "*.{ts,tsx}": [
      "@parcel/validator-typescript"
    ]
  },
  "optimizers": {
    "*.css": [
      "@parcel/optimizer-css"
    ]
  }
}

// tsconfig.json


{
  "compileOnSave": true,
  "compilerOptions": {
    "allowJs": true,
    // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
    "allowSyntheticDefaultImports": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    "rootDir": "./",
    "emitDecoratorMetadata": true,
    // 从 tslib 导入辅助工具函数（比如 __extends， __rest等）
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "extendedDiagnostics": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true, // Ensure that Babel can safely transpile files in the TypeScript project
    "jsx": "preserve",
    // 指定生成哪个模块系统代码
    "module": "ESNext",
    // 决定如何处理模块。
    "moduleResolution": "Node",
    "noUnusedLocals": true, // trun on when is prod env
    "noUnusedParameters": true, // trun on when is prod env
    "preserveConstEnums": true,
    "pretty": false,
    "noEmit": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    // 生成相应的 .map文件。
    "sourceMap": false,
    "strict": true,
    "target": "es2021",
    "useDefineForClassFields": true,
    "importsNotUsedAsValues": "remove",
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "types": [
      "node"
    ],
    "paths": {
      "@assets/*": [
        "./src/assets/*"
      ],
      "@client/*": [
        "./src/client/*"
      ],
      "@components/*": [
        "./src/components/*"
      ],
      "@foundation/*": [
        "./src/foundation/*"
      ],
      "@i18n/*": [
        "./src/i18n/*"
      ],
      "@net/*": [
        "./src/net/*"
      ],
      "@shared/*": [
        "./src/shared/*"
      ]
    },
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2021"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "typings/*"
  ],
  "exclude": [
    "built/**",
    "node_modules/**",
    "public/**"
  ]
}

[Levminer]

@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

[mischnic]

@Levminer That's working correctly for me. What Parcel version are you using? If it's indeed 2.6.2, then please share a complete example including package.json/lockfile/... as a repo or a zip file.

[Levminer]

@Levminer That's working correctly for me. What Parcel version are you using? If it's indeed 2.6.2, then please share a complete example including package.json/lockfile/... as a repo or a zip file.

What OS did you try it on? I'm on Windows, I tried it on GitHub codespaces and it works fine, so I guees its Windows or my machine.

[mischnic]

As far as I can tell, everything should be fixed now (with the next nightly/next release).

If you're still having issues, please open a new issue with a reproduction.