V2: Source maps are not showing the original file, they show an intermediary transpilation step

[liam-careerhub]

🐛 Bug report

When compiling my application with Parcel, the source maps do not indicate the state of the original file. I think the step shown is after the Babel step. This only seems to affect TypeScript files, my JavaScript builds are fine.

I am using Babel because I want to polyfill my code with CoreJS, I followed your docs to set this up. If there is a way to polyfill easily without using Babel I would be open to trying that.

🎛 Configuration

I've included a full repro repo below, but in summary:

.parcelrc

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

.babelrc

{
    "presets": [
        "@babel/preset-react",
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3,
                "targets": "> 0.25%, last 2 versions, IE 10, not dead"
            }
        ]
    ],
    "sourceType": "unambiguous"
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "../dist",
        "sourceRoot": ".",
        "declaration": false,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "disableSizeLimit": true,
        "typeRoots": [ "../node_modules/@types", "./**" ],
        "types": [ ],
        "module": "CommonJS",
        "target": "ES5",
        "lib": [ "es6", "dom", "dom.iterable", "ES2019", "ES2020" ],
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "moduleResolution": "node",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "experimentalDecorators": true,
        "rootDir": "../"
    },
    "include": [ "**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js" ],
    "exclude": [
        "node_modules",
        "**/.test.ts",
        "**/.spec.ts"
    ]
}

🤔 Expected Behavior

I should see this in the sourcemapped file:

import app from '../Example/ReactApp';
app('app-1');

😯 Current Behavior

Instead, I see this:

"use strict";

var _ReactApp = _interopRequireDefault(require("../Example/ReactApp"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _ReactApp.default)('app-1');

I also can't put any breakpoints into this file as it seems to be using the original TypeScript file's breakpoint lines.

💁 Possible Solution

Not sure, it might be to do with my configuration but I have tried messing with the source map settings of both Babel and TypeScript to no avail.

🔦 Context

The repro I have attached below simulates what I have in my production app, this issue is preventing debugging which is super problematic for me and might require me to find an alternative to Parcel ( I have just moved from Webpack, which was way slower, so I'd rather not...)

💻 Code Sample

Please see my repro environment here:
https://github.com/liam-careerhub/parcel-sourcemap-repro

🌍 Your Environment

Software	Version(s)
Parcel	v2 nightly 776 (latest at time of writing, I also tried a bunch of older versions)
Node	v14.17.0
npm/Yarn	npm@7.16.0
Operating System	Windows 10 64bit

Thanks for your help 👍

[liam-careerhub]

Following @mischnic's suggestion on #6642, which pointed out that I missed replacing @babel/preset-env with @parcel/babel-preset-env has helped somewhat, however, I'm still having issues with TSX.

I get a partially transformed file, with the JSX converted already:

import React from "react";
import { render } from "react-dom";

var ReactApp = function ReactApp(_a) {
  var id = _a.id;
  return /*#__PURE__*/React.createElement("div", null, "App ", id !== null && id !== void 0 ? id : 'idk', " is rendering here");
};

export default (function (id) {
  return render( /*#__PURE__*/React.createElement(ReactApp, {
    id: id
  }), document.getElementById(id));
});

I have got it to work by only using Babel and removing TSC from my workflow, which I guess is the way I need to do it from now on.

I still think there is an issue with using Babel and TSC together.

[mischnic]

Should be fixed by #7287