反应动态import（）语法不起作用

Question

我正在尝试使用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：意外令牌，预期{（5：7）

任何帮助将不胜感激

Answer 1

尝试在return中使用loading

import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import './App.scss';
const Loading = () => return <div className="animated fadeIn pt-3 text-center">Loading...</div>;


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

Answer 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"]
}

Answer 3

在我的情况下，我需要为我的React应用程序自定义Webpack / Babel配置：

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

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

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