reactjs - React.lazy() 是否适用于 Create React App？

Question

我使用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 看起来像

标签： reactjswebpackreact-lazy-load

Answer 1

我不确定这是否能解决您的问题，但也许您可以尝试一下。你在用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中以这种方式工作正常。