为什么React Vite项目添加延迟加载会导致根节点为空？

Question

我正在使用 React (Typescript) 和 Vite 开发一个应用程序。为了减少包的大小，我想使用 React 的 lazy 函数来实现代码分割。我不想为此引入第三方库。

但是当我运行应用程序时，我看到的只是一个空白页面，并且devtools显示App组件尚未添加到根节点下：

<body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
</body>

我在这里缺少什么？

因此，我们使用

npm create vite@latest

初始化一个新项目并删除一些样板文件。

我们创建了一个非常基本的组件

MyComponent

：

// MyComponent.tsx
const MyComponent = () => {
  return <p>component text</p>;
};

export default MyComponent;

然后将其懒惰地导入到

App.tsx

// App.tsx
import { lazy } from "react";
import "./App.css";

function App() {
  const MyComponent = lazy(() => import("./MyComponent"));
  return (
    <>
      <h1>My page</h1>
      <MyComponent />
    </>
  );
}

export default App;

但是当我们运行应用程序时，我们看到的只是一个空白页面，并且devtools显示App组件尚未添加到根节点下。

链接到包含最小示例的存储库

我不知道还能尝试什么。

Answer 1

React 文档指定您必须在组件范围之外声明延迟导入组件。

您必须像常规导入一样导入它们：在

tsx

文件的顶部

// App.tsx
import { lazy } from "react";
import "./App.css";

const MyComponent = lazy(() => import("./MyComponent"));

function App() {
  return (
    <>
      <h1>My page</h1>
      <MyComponent />
    </>
  );
}

export default App;

为什么React Vite项目添加延迟加载会导致根节点为空？

问题描述投票：0回答：1

1个回答

最新问题

为什么React Vite项目添加延迟加载会导致根节点为空？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1