Question

我试图重构不断增长的React App以使用延迟加载。以下面的例子为例：

processItem(item: tItem): boolean {
    const isValid: boolean = checkValidity(item);
    if (!isValid) return false;

    _.each(someCommonKeyValPairCollection, () => { /* do some common stuff */ });

    // if (typeof item.someKeyValPairCollection !== 'undefined') // tried first, doesn't like
    if (item.type === eItemType.a) processA(item.someKeyValPairCollection);

    return true;
}

我的webpack编译始终失败：

if (item.type === eItemType.a) // do some special stuff

显然导致代码窒息，但我不明白为什么。

我的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> } });文件如下所示：

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

Answer 1

因此，在T.J. Crowder's comment跟进原始问题后，我找到了babel dynamic import plugin

用纱线安装：

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

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

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

修正了Unexpected token问题。

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

1 个答案: