Skip to content

merge-sibling-variables loses source mapping #1046

Open
@seanmorris

Description

@seanmorris

Describe the bug

The plugin babel-plugin-transform-merge-sibling-variables does not maintain source mapping when merging sibling variable declarators into a single declaration after babel-plugin-transform-modules-commonjs has been applied.

To Reproduce

Minify a file that has been processed with babel-plugin-transform-modules-commonjs. If the original file has more than one import statement, the mapping will be lost.

Minimal code to reproduce the bug

index.js.map

import { abc } from 'abc';
import { xyz } from 'xyz';

Actual Output

index.out.js

"use strict";

var _abc = require("abc"),
  _xyz = require("xyz");

//# sourceMappingURL=index.out.js.map

index.out.js.map

{
    "version": 3,
    "file": "index.actual.js",
    "names":
    [],
    "sources":
    [
        "index.js"
    ],
    "sourcesContent":
    [
        "import { abc } from 'abc';\nimport { xyz } from 'xyz';"
    ],
    "mappings": ""
}

Expected Output

index.out.js

"use strict";

var _abc = require("abc"),
  _xyz = require("xyz");

//# sourceMappingURL=index.out.js.map

index.out.js.map

{
    "version": 3,
    "file": "index.expected.js",
    "names":
    [
        "_abc",
        "require",
        "_xyz"
    ],
    "sources":
    [
        "index.js"
    ],
    "sourcesContent":
    [
        "import { abc } from 'abc';\nimport { xyz } from 'xyz';"
    ],
    "mappings": ";;IAAAA,IAAA,GAAAC,OAAA,OAA0B;EAC1BC,IAAA,GAAAD,OAAA,OAA0B"
}

Configuration

How are you using babel-minify?

$ babel index.js -o index.out.js

babel-minify version: 0.5.2

babel version : 7.21.0

babel-plugin-transform-modules-commonjs: 8.0.11

babel-plugin-transform-merge-sibling-variables: 6.9.5

babelrc

{
  "sourceMaps": true,
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "babel-plugin-transform-merge-sibling-variables",
  ]
}

package.json

{
  "devDependencies": {
    "@babel/cli": "7.21.0",
    "@babel/core": "7.21.0",
    "babel-minify": "0.5.2",
    "plugin-transform-modules-commonjs": "8.0.11"
  }
}

Possible solution

This pull request: #1047

You can use the link below to inspect the mappings for a given output file and sourcemap.

https://evanw.github.io/source-map-visualization/#MTEwACJ1c2Ugc3RyaWN0IjsKCnZhciBfYWJjID0gcmVxdWlyZSgiYWJjIiksCiAgX3h5eiA9IHJlcXVpcmUoInh5eiIpOwoKLy8jIHNvdXJjZU1hcHBpbmdVUkw9aW5kZXguZXhwZWN0ZWQuanMubWFwMjQ1AHsidmVyc2lvbiI6MywiZmlsZSI6ImluZGV4LmV4cGVjdGVkLmpzIiwibmFtZXMiOlsiX2FiYyIsInJlcXVpcmUiLCJfeHl6Il0sInNvdXJjZXMiOlsiaW5kZXguanMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYWJjIH0gZnJvbSAnYWJjJztcbmltcG9ydCB7IHh5eiB9IGZyb20gJ3h5eic7Il0sIm1hcHBpbmdzIjoiOztJQUFBQSxJQUFBLEdBQUFDLE9BQUEsT0FBMEI7RUFDMUJDLElBQUEsR0FBQUQsT0FBQSxPQUEwQiJ9

https://evanw.github.io/source-map-visualization/

alternative tool:https://sokra.github.io/source-map-visualization/

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions