Skip to main content

@babel/plugin-syntax-dynamic-import

NOTE: This plugin is included in @babel/preset-env, in ES2020

Installation​

npm install --save-dev @babel/plugin-syntax-dynamic-import

Usage​

babel.config.json
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Via CLI​

Shell
babel --plugins @babel/plugin-syntax-dynamic-import script.js

Via Node API​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-syntax-dynamic-import"],
});

Working with Webpack and @babel/preset-env​

Currently, @babel/preset-env is unaware that using import() with Webpack relies on Promise internally. Environments which do not have builtin support for Promise, like Internet Explorer, will require both the promise and iterator polyfills be added manually.

For example, with core-js@3:

webpack.config.js
const config = {
  entry: [
    "core-js/modules/es.promise",
    "core-js/modules/es.array.iterator",
    path.resolve(__dirname, "src/main.js"),
  ],
  // ...
};

or

src/main.js
import "core-js/modules/es.promise";
import "core-js/modules/es.array.iterator";

// ...

This is the same for core-js@2, except the imports paths are slightly different:

webpack.config.js
const config = {
  entry: [
    "core-js/modules/es6.promise",
    "core-js/modules/es6.array.iterator",
    path.resolve(__dirname, "src/main.js"),
  ],
  // ...
};

or

src/main.js
import "core-js/modules/es6.promise";
import "core-js/modules/es6.array.iterator";

// ...