Rollup / Babel / CoreJS - "Require is not defined"

Question

I'm trying to use Rollup.js to build some JS to be compatible with IE11. After a very frustrating couple of hours fiddling with various config options, I hit upon the following:

import resolve from "@rollup/plugin-node-resolve"
import { babel } from '@rollup/plugin-babel';

export default {
  input: "app/javascript/application.js",
  output: {
    file: "app/assets/builds/application.js",
    format: "es",
    inlineDynamicImports: true,
    sourcemap: true
  },
  plugins: [
    babel({
      presets: [
        [
          "@babel/preset-env", {
            "useBuiltIns": "usage",
            "debug": true,
            "corejs": "3"
          }
        ]
      ]
    }),
    resolve(),
  ]
}

Looking at the debug entries, it seems that my polyfills are getting added (yay?). However it seems that they're getting added with requires for some reason, as when I try to run the JS in my browser, I get:

Uncaught ReferenceError: require is not defined

The offending lines of code seem to be:

var TO_STRING_TAG_SUPPORT = require('../internals/to-string-tag-support');

var redefine$2 = require('../internals/redefine');

var toString$3 = require('../internals/object-to-string'); // `Object.prototype.toString` method
// https://tc39.es/ecma262/#sec-object.prototype.tostring

But I don't understand why this should be, surely if Babel is transpliling code for the browser, then require should be nowhere near my code? Please help, I'm tearing what little hair I have remaining out over this!

Answer 1

I did a little research on this and it looks like Babel doesn't actually touch require/import statements-- it relies on the bundler to do that, either by itself or through other plugins. I believe you can resolve this with the CommonJS plugin:

import commonjs from '@rollup/plugin-commonjs';
import resolve from "@rollup/plugin-node-resolve"
import { babel } from '@rollup/plugin-babel';

export default {
  input: "app/javascript/application.js",
  output: {
    file: "app/assets/builds/application.js",
    format: "es",
    inlineDynamicImports: true,
    sourcemap: true
  },
  plugins: [
    babel({
      presets: [
        [
          "@babel/preset-env", {
            "useBuiltIns": "usage",
            "debug": true,
            "corejs": "3"
          }
        ]
      ]
    }),
    resolve(),
    commonjs()
  ]
}

The relevant added lines are the first line and the last line in the plugins array.

I don't have a build system set up myself so I can't test this, but I hope it helps!