How to use @babel/plugin-syntax-dynamic-import - 10 common examples

// Remove PropTypes from production build
        require('babel-plugin-transform-react-remove-prop-types').default,
        {
          mode: 'wrap',
        },
      ],
      // function* () { yield 42; yield 43; }
      !isEnvTest && [
        require('@babel/plugin-transform-regenerator').default,
        {
          // Async functions are converted to generators by @babel/preset-env
          async: false,
        },
      ],
      // Adds syntax support for import()
      require('@babel/plugin-syntax-dynamic-import').default,
      isEnvTest &&
        // Transform dynamic import to require
        require('babel-plugin-transform-dynamic-import').default,
      // Extract intl messages
      require('babel-plugin-react-intl').default,
    ].filter(Boolean),
  };
};

module.exports = ({ types: t }) => ({
  inherits: syntax.default,
  visitor: {
    CallExpression(path, { file, opts }) {
      if (path.node.callee.type !== 'Import') {
        return;
      }

      const [source] = path.get('arguments');
      if (source.type !== 'StringLiteral') {
        /* Should never happen */
        return;
      }

      source.replaceWith(
        t.stringLiteral(
          tryResolve(path, source.node.value, file.opts.parserOpts.sourceFileName, opts),
        ),

function plugins(api, opts = {}) {
  return cleanList([
    require('@babel/plugin-syntax-dynamic-import').default,
    require('@babel/plugin-syntax-export-default-from').default,
    require('@babel/plugin-syntax-export-namespace-from').default,
    require('@babel/plugin-proposal-optional-chaining').default,
    require('@babel/plugin-proposal-nullish-coalescing-operator').default,
    [require('@babel/plugin-proposal-decorators').default, {legacy: true}],
    [require('@babel/plugin-proposal-class-properties').default, {loose: true}],
    [
      require('babel-plugin-transform-react-remove-prop-types').default,
      {
        wrap: true
      }
    ],
    [
      require('@babel/plugin-proposal-object-rest-spread').default,
      {useBuiltIns: true} // asume Object.assign is available by browser or polyfill
    ],

plugins = plugins.concat([
    require('babel-plugin-macros'),
    require('@babel/plugin-transform-destructuring').default,
    [require('@babel/plugin-proposal-decorators').default, { legacy: true }], // must run before themeable-styles plugin below
    [require('@babel/plugin-proposal-class-properties').default, { loose: true }],
    require('@babel/plugin-proposal-export-default-from').default,
    [require('@babel/plugin-proposal-object-rest-spread').default, { useBuiltIns: true }],
    require('@babel/plugin-proposal-optional-chaining').default,
    [require('@babel/plugin-transform-runtime').default, {
      ...babelHelperVersion,
      corejs: false,
      regenerator: true,
      helpers: true,
      useESModules: opts.esModules
    }],
    require('@babel/plugin-syntax-dynamic-import').default,
    require('babel-plugin-transform-undefined-to-void')
  ])

  if (process.env.NODE_ENV === 'production') {
    plugins.push(
      require('@babel/plugin-transform-react-constant-elements').default
    )
  }

  let themeableOptions = {
    postcssrc: loadConfig('postcss', require('@instructure/ui-postcss-config')()),
    themeablerc: loadConfig('themeable')
  }

  if (opts.themeable && typeof opts.themeable === 'object') {
    const { themeablerc, postcssrc } = opts.themeable

module.exports = function () {
  var template = require("@babel/template").default;
  var buildImport = template("module.dynamicImport(SOURCE)");

  return {
    name: "transform-meteor-dynamic-import",
    inherits: require("@babel/plugin-syntax-dynamic-import").default,
    visitor: {
      CallExpression: function (path) {
        if (path.node.callee.type === "Import") {
          path.replaceWith(buildImport({
            SOURCE: path.node.arguments
          }));
        }
      }
    }
  };
};

let reactLoadableRoutes = require("../plugins/react-loadable-routes");
reactLoadableRoutes = reactLoadableRoutes.default ? reactLoadableRoutes.default : reactLoadableRoutes;

let dynamicImportWebpack = require("../plugins/dynamic-import-webpack");
dynamicImportWebpack = dynamicImportWebpack.default ? dynamicImportWebpack.default: dynamicImportWebpack;

let syntaxDynamicImport = require("@babel/plugin-syntax-dynamic-import");
syntaxDynamicImport = syntaxDynamicImport.default ? syntaxDynamicImport.default: syntaxDynamicImport;

let objectRestSpread = require("@babel/plugin-proposal-object-rest-spread");
objectRestSpread = objectRestSpread.default ? objectRestSpread.default: objectRestSpread;

let decorators = require("@babel/plugin-proposal-decorators");
decorators = decorators.default ? decorators.default: decorators;

let classProperties = require("@babel/plugin-proposal-class-properties");
classProperties = classProperties.default ? classProperties.default: classProperties;

let generatorFunctions = require("@babel/plugin-proposal-async-generator-functions");
generatorFunctions = generatorFunctions.default? generatorFunctions.default : generatorFunctions;

let lodash = require("babel-plugin-lodash");
lodash = lodash.default ? lodash.default: lodash;

* Copyright (c) 2017 American Express Travel Related Services Company, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 */

const envPreset = require('@babel/preset-env');
const reactPreset = require('@babel/preset-react');
const syntaxDynamicImport = require('@babel/plugin-syntax-dynamic-import').default;
const proposalClassProperties = require('@babel/plugin-proposal-class-properties').default;
const exportDefaultFrom = require('@babel/plugin-proposal-export-default-from').default;
const proposalOptionalChaining = require('@babel/plugin-proposal-optional-chaining').default;

const { browserlist, legacyBrowserList } = require('./browserlist');

module.exports = () => ({
  env: {
    modern: {
      presets: [
        [envPreset, {
          targets: {
            browsers: browserlist,
            node: '10.13.0',
          },
        }],

}
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        require('@babel/preset-env').default,
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,

],
      (isProductionEnv || isDevelopmentEnv) && [
        require('@babel/preset-env').default,
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ],
      ["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }],
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,

corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ],
      [
        require('@babel/preset-react').default,
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require("@babel/plugin-proposal-private-methods").default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,