延迟加载组件时出现意外令牌

Question

我正在尝试重构一个不断增长的React App以使用延迟加载。以以下为例：

import React, { Component } from 'react'
import { render } from 'react-dom'
import Loadable from 'react-loadable';

const Orders = Loadable({
    loader: () => import('./Orders'),
    loading() {
        return <div>Loading...</div>
    }
});

我的webpack编译总是失败并显示以下内容：

Module build failed: SyntaxError: Unexpected token
...
> 24 |   loader: () => import('./Orders'),

显然，导入使代码令人窒息，但是我不明白为什么。

我的.babelrc文件如下所示：

{
  "presets": ["env", "react"]
}

Answer 1

因此，跟随TJ Crowder对我的原始问题的评论，我找到了babel动态导入插件

用纱安装：

yarn add babel-plugin-syntax-dynamic-import -dev

然后将其添加到我的.babelrc中，从而：

{
    "presets": ["env", "react"],
    "plugins": ["syntax-dynamic-import"]
}

解决了这个Unexpected token问题。