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

Question

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

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'),

显然是 import 阻塞了代码，但我不明白为什么。

我的 .babelrc 文件如下所示：

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

Answer 1

所以跟进 to my original question I found the babel dynamic import plugin

用纱线安装：

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

然后将其添加到我的 .babelrc，因此：

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

修复了 Unexpected token 问题。

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

Unexpected token when lazy loading components

javascript

lazy-loading

reactjs

webpack

babeljs