CODEWITHSUNDEEP
javascriptecmascript-6babeljses6-modules
croraf
croraf

Reputation: 4720

Why babel transpiles import and export in this case?

I have this babel.config.js:

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
  ["@babel/preset-react"],
];

Why does it transpile es6 import/export into the following, if all of the above targets support import/export:

var _styles = require("@material-ui/styles");

var _core = require("@material-ui/core");

exports.default = _default;

Upvotes: 1

Views: 467

Answers (1)

Älskar
Älskar

Reputation: 2579

Because you need to tell Babel explicitly to target ES modules. It doesn't have the ability to infer that from your target browser list.

Looking at the@babel-env documention, this is how you would targets supporting esmodules. 

"@babel/env",
  {
    "targets": {
      "esmodules": true
    }
  }

Please note: when specifying the esmodules target, browsers targets will be ignored.

Upvotes: 2

Related Questions