plugin-syntax-dynamic-import.md

Error in user YAML: (<unknown>): found character that cannot start any token while scanning for the next token at line 2 column 8

---
id: babel-plugin-syntax-dynamic-import
title: @babel/plugin-syntax-dynamic-import
sidebar_label: syntax-dynamic-import
---

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

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

Via CLI

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

Via Node API

require("@babel/core").transform("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.

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

or

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

// core-js@3 src/main.js
import "core-js/stable/promise";
import "core-js/table/array/iterator";

// ...