JSX inline sourcemap issue

[Mokshit06]

Describe the bug When transpiling JSX using swc, if the jsx includes dynamic children, then the inline sourcemap generated is invalid.

Input code

const foo = <h1>{bar}</h1>

Config

{
  "sourceMaps": "inline",
  "jsc": {
    "target": "es5",
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "loose": true,
  }
}

Expected behavior Inline sourcemap generated (invalid): data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxhbm9uPiJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBmb28gPSA8aDE-e2Jhcn08L2gxPiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiSUFBTSxHQUFHLHNDQUFJLEVBQUUsU0FBRSxHQUFHIn0=

Sourcemap generated from result object with Buffer:

`data:application/json;base64,${Buffer.from(map, 'utf8').toString('base64')}`

data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxhbm9uPiJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBmb28gPSA8aDE+e2Jhcn08L2gxPiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiSUFBTSxHQUFHLHNDQUFJLEVBQUUsU0FBRSxHQUFHIn0=

Both the sourcemaps are different. The one generated with Buffer is valid whereas the one generated by swc is invalid

Version The version of @swc/core: ^1.2.58

Additional context Add any other context about the problem here.

[kdy1]

How did you get the valid map?

[Mokshit06]

The map was the JSON string returned by swc when sourceMaps was set to true. The issue was with the data uri that swc created. Also, after trying this with many inputs, it seems like this issue is not really related to the props because

const foo = () => <h1 />;

creates an invalid sourcemap whereas

const foo = <h1 />;

doesn't, so I'm not exactly sure what is causing this issue.

Repro

const swc = require('@swc/core');

const code = `
const foo = () => <h1 />;
`;

/** @type {swc.Options} */
const swcConfig = {
  jsc: {
    target: 'es5',
    parser: {
      syntax: 'ecmascript',
      jsx: true,
    },
    loose: true,
  },
  sourceFileName: 'noop.js',
  sourceMaps: true,
};

const result = swc.transformSync(code, swcConfig);
// valid
console.log(
  `${
    result.code
  }\n//# sourceMappingURL=data:application/json;base64,${Buffer.from(
    result.map,
    'utf8'
  ).toString('base64')}`
);

const resultInline = swc.transformSync(code, {
  ...swcConfig,
  sourceMaps: 'inline',
});
// invalid
console.log(resultInline.code);

[Mokshit06]

I think there are many things that are causing this issue. I was able to fix the above sample

const foo = () => <h1 />

by removing the \n character of the template literal but it doesn't work when the tag is not self closing like

const foo = () => <h1></h1>;

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.