反应动态导入（）语法不起作用答案

【问题标题】：React dynamic import() syntax not working反应动态导入（）语法不起作用
【发布时间】：2018-12-12 17:43:51
【问题描述】：

我正在尝试使用 import() 导入组件。它给了我错误。

我正在使用react-loadable 我也尝试了react-import 包，但没有运气

我尝试了以下代码：

import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import './App.scss';

const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;


// Containers
const DefaultLayout = Loadable({
  loader: () => import('./containers/DefaultLayout'),
  loading
});

模块构建失败：SyntaxError: ...../resources/assets/js/src/App.js: Unexpected token, expected { (5:7)

任何帮助将不胜感激

【问题讨论】：

检查是否安装了 babel-loader 和依赖，可能是问题。
使用require() 而不是import()。
require() 确实有效，但现在其他反应语法出现问题，例如 const loading = () => .. 语法无效。 @AbhishekKumawat 我会考虑其他选择。

标签： reactjs

【解决方案1】：

我的 React 应用程序有一个自定义的 Webpack/Babel 配置，在我的情况下我需要安装：

npm i @babel/plugin-syntax-dynamic-import

然后我需要在"babel" 下的package.json 文件中添加一行 > "plugins":

"babel": {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
},

【讨论】：

【解决方案2】：

您需要添加对动态导入语法的支持。

Babel 有一个插件，名为 @babel/plugin-syntax-dynamic-import
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

通过以下方式安装插件：
yarn add -D @babel/plugin-syntax-dynamic-import -D
或
npm install --save-dev @babel/plugin-syntax-dynamic-import

那么：
Babel 建议将插件添加到您的 .babelrc 文件中，例如：

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

【讨论】：