1

我使用npx create-react-app my-app cmd(React 17 版本)创建了一个 React 应用程序。现在好吧,我只是尝试替换经典

import Component from './Component'

to

const Component = React.lazy(() => import('./Component'));

and then

<React.Suspense fallback={<div>Loading.. </div>}>
    <Component />
</React.Suspense>

但它会引发类似 SyntaxError: Unexpected token at import(6:22) 的错误

> 6 |  const Component = React.lazy(() => import('./Component'));

谁能帮我解决这个问题?

这是代码语法 在此处输入图像描述

这是悬念部分 在此处输入图像描述

这是编译输出 在此处输入图像描述

我的 package.json 看起来像

在此处输入图像描述

4

1 回答 1

0

我不确定这是否能解决您的问题,但也许您可以尝试一下。你在用Babel吗?

它说:

使用 Babel 时,您需要确保 Babel 可以解析动态导入语法但不会对其进行转换。为此,您将需要@babel/plugin-syntax-dynamic-import。

https://reactjs.org/docs/code-splitting.html#import

我在.babelrc项目根目录上创建了一个文件并添加了内容:

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

我还导入lazy了我的组件:

import React, { Component, lazy, useEffect, useState } from 'react';

在我的项目React.lazy中以这种方式工作正常。

于 2021-02-05T13:35:21.347 回答