Transpiling es6 modules to run in the browser

Question

I have a simple example of an app where I am using es6 modules, and I want to transpile them down to es5 (I don't want to run modules in the browser, although I am aware their support is 90%+ at this point).

I am going round in circles coming up against the same errors and problems.
Here is my setup and what I am trying to achieve:

//add.js
export function add(x, y) {
  return x + y;
}

//multiply.js
export function multiply(x, y) {
  return x * y;
}

Then I run babel to output a bundle.js file using the @babel/preset-env preset.

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

The output looks like this:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.add = add;

function add(x, y) {
  return x + y;
}
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.multiply = multiply;

function multiply(x, y) {
  return x * y;
}

When I run my html file in the browser, the console logs the following error:
bundle.js:3 Uncaught ReferenceError: exports is not defined

My question is this:
What is babel outputting?
Are they commonjs modules?
How can I get es6 modules to run in the browser?

Answer 1

"esmodules": true" is wrong.

when specifying "esmodules": true" , browsers targets will be ignored and scripts not transpiled to es5. the output depends on your target values. modern browsers handle es6 modules native, the best way is to transpile modern browsers different then legacy browser (ie11) and load scripts specific eg

// low transpiled (loads only in modern browser)
<script type="module" src="/assets/scripts/main.js"></script>

// full transpiled (loads only in legacy browser) --> polyfill this bundle
<script nomodule src="/assets/scripts/main.legacy.js" defer></script> 

// https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript/babel-config.js
const modern = {
  presets: [
    ["@babel/preset-env", {
      // define transpile level
      targets: {
        browsers: [
          "> 1% in EU",
          "not ie 11",
          "not dead"
        ]
      },
      useBuiltIns: "usage",
      corejs: 3,
    }]
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-eval"
  ],
  comments: false,
  cacheDirectory: path.join(CACHE_PATH, 'babel-loader')
};

const legacy = {
  presets: [
    ["@babel/preset-env", {
      // define transpile level
      targets: {
        browsers: [
          "> 1% in CH",
          "ie >= 11",
          "not dead"
        ]
      },
      useBuiltIns: "usage",
      corejs: 3,
    }]
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-eval"
  ],
  comments: false,
  cacheDirectory: path.join(CACHE_PATH, 'babel-loader')
};

Please check the babel documentation for more information.