Rollup: Rollup + Babel results in incorrect sourcemap

[jodarove]

The sourcemap result from 2 rollup plugins that internally do a babel transformation is incorrect.

• Rollup Version: 0.66.2
• Operating System (or Browser): osx 10.13.6 and tested sourcemaps in Chrome v70.0.3538.110
• Node Version: 8.11.3
• Babel Version: 7.1.0

How Do We Reproduce?

Given the following rollup plugins:

// rollup-plugins.js
const babelCore = require('@babel/core');

module.exports = {
    rollupPluginClassTransform: function() {
        const BABEL_CONFIG = {
            sourceMaps: true,
            "plugins": [
                "@babel/plugin-transform-classes"
            ]
        };

        return {
            name: 'rollup-plugin-class-transform',
            transform: (src, id) => {
                return babelCore.transform(src, BABEL_CONFIG);
            },

        };
    },

    rollupPluginArrowFunctionTransform: function() {
        const BABEL_CONFIG = {
            sourceMaps: true,
            "plugins": [
                "@babel/plugin-transform-arrow-functions"
            ]
        };

        return {
            name: 'rollup-plugin-class-arrow-functions-transform',
            transform: (src, id) => {
                return babelCore.transform(src, BABEL_CONFIG);
            },

        };
    },
};

and the following code:

// index.js
class ListPrinter {
    constructor(list) {
        this.list = list;
    }

    print() {
        this.list.forEach((element) => {
            console.log(element);
        });
    }
}

const someListPrinter = new ListPrinter([1, 2, 3]);

someListPrinter.print();

to be transformed with this rollup config:

const path = require('path');
const rollupPlugins = require('./rollup-plugins');

module.exports = {
    input: path.resolve('index.js'),
    output: {
        sourcemap: true,
        file: path.resolve('build/index.js'),
        format: 'iife',
    },
    plugins: [
        rollupPlugins.rollupPluginClassTransform(),
        rollupPlugins.rollupPluginArrowFunctionTransform(),
    ],
};

The generated sourcemap is not correct.

Note: If we combine both of the above babel transformations in one rollup plugin, the generated sourcemap is correct. Also the partial sourcemaps from each transform looks good.

Expected Behavior

Generates a correct sourcemap.

Actual Behavior

The sourcemap is shifted.

[justingrant]

FYI, I ran into a similar problem with create-react-app, and the fix (https://github.com/facebook/create-react-app/pull/7022) turned out to be adding these two options to babel config:

sourceMaps: true,
inputSourceMap: true,

You're already using the sourceMaps: true option, but It might be worth a try to see if adding inputSourceMap: true to your Babel config will fix this. In theory, the inputSourceMap option is supposed to accept incoming sourcemaps from upstream, which if you are running two babel transforms this might be the problem.

It's also possible that this problem has nothing to do with babel config. YMMV.

BTW, the symptoms that I was seeing was a little different from what's reported here. The symptoms I saw was that the sourcemap's mappings matched the inline code inside the sourcemap file, but the sourcemap file's sourcesContent code didn't actually match the original source code. There were differences in newlines, indenting, and other whitespace. This caused the sourcemap to work fine in Chrome but break in the VSCode debugger which uses the original source files (not the inline sourcesContent in the sourcemap file).

This experience suggests that whenever you try to fix a sourcemap issue, verifying the fix should happen both in Chrome debugger (to test mappings to inline sourcesContent in the sourcemap file) and in VSCode debugger (to test mappings to original source files).

[shellscape]

Hey folks. This is a saved-form message, but rest assured we mean every word. The Rollup team is attempting to clean up the Issues backlog in the hopes that the active and still-needed, still-relevant issues bubble up to the surface. With that, we're closing issues that have been open for an eon or two, and have gone stale like pirate hard-tack without activity.

We really appreciate the folks have taken the time to open and comment on this issue. Please don't confuse this closure with us not caring or dismissing your issue, feature request, discussion, or report. The issue will still be here, just in a closed state. If the issue pertains to a bug, please re-test for the bug on the latest version of Rollup and if present, please tag @shellscape and request a re-open, and we'll be happy to oblige.

[GerardRodes]

It happens to me something similar

With following configuration

sourceMaps: true,
inputSourceMap: true,

The sourcemaps of my final bundle contain transpiled code, when shouldn't

The scenario is the following
App => dependency

Bot with

// rollup.config.js
output: {
    format: 'esm',
    dir: 'dist',
    sourcemap: true,
  },
 plugins: [ babel() ]

and

// .babelrc
{
    "sourceMaps": true,
    "inputSourceMap": true,
}

And then when inspecting App source code on the browser, transpiled code from dependency is shown

function hex(c) {
  var _Vue$$oa2, _Vue$$oa2$theme;

  let color = (Vue$1 === null || Vue$1 === void 0 ? void 0 : (_Vue$$oa2 = Vue$1.$oa) === null || _Vue$$oa2 === void 0 ? void 0 : (_Vue$$oa2$theme = _Vue$$oa2.theme) === null || _Vue$$oa2$theme === void 0 ? void 0 : _Vue$$oa2$theme[c]) || c;

  if (typeof c !== 'string') {
    return Rgb2Hex(rgb(c));
  }

  return normalizeHex(color);
}