使用 React.lazy 时未捕获的未定义错误

Posted 2023-02-21

【中文标题】使用 React.lazy 时未捕获的未定义错误

【英文标题】：Uncaught undefined error when using React.lazy

【发布时间】：2021-03-18 20:16:35

【问题描述】：

我正在尝试按照 React 文档中的说明实现 Route-based code splitting。

这是我在添加惰性实现之前的应用。这工作正常：

import Counter from "./Counter";
import Home from "./Home";
import Login from "./Login";

export function App() 
  return (
      <Router>
        <Suspense fallback=<div>"Loading.."</div>>
          <Switch>
            <Route exact path="/" component=Home />
            <Route exact path="/login" component=Login />
            <Route exact path="/counter" component=Counter />
          </Switch>
      </Router>
  );

我所做的只是用这个替换了 3 个导入：

import  lazy, Suspense  from "react";
const Home = lazy(() => import("./Home"));
const Login = lazy(() => import("./Login"));
const Counter = lazy(() => import("./Counter"));

此代码构建成功，但浏览器上没有呈现任何内容，我在控制台中收到此错误：

Uncaught undefined
The above error occurred in one of your React components:
    in Unknown (created by Context.Consumer)
    in Route (at App.tsx:29)
    in Switch (at App.tsx:28)
    in Suspense (at App.tsx:27)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.tsx:25)
    in ErrorBoundary (at App.tsx:24)
    in App (at src/index.tsx:19)
    in Provider (at src/index.tsx:18)
    in StrictMode (at src/index.tsx:17)

我做错了吗？

其他上下文：

如果重要的话，组件被命名为默认重新导出的组件，因为这是 React.lazy 所要求的：

export  Home as default  from "./Home";

其中一个组件使用 redux，因此应用程序被包装在 store 提供程序中：

    <Provider store=store>
      <App />
    </Provider>

这是我的 tsconfig：

  "compilerOptions": 
    "baseUrl": ".",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true,
    "target": "es5",
    "module": "esnext"
  ,
  "include": [
    "src"
  ]

以及包版本：

    "react": "^17.0.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-scripts": "^4.0.1",
    "react-router-dom": "^5.2.0",
    "typescript": "^4.1.2",

这里是source code 和可能相关的issue on GitHub。

【参考方案1】：

在查看了我自己的问题之后，我通过查看依赖项找到了答案。我的react 和react-dom 在不同的主要版本上。

这修复了它： npm i -D react-dom@17.0.1

【讨论】：

你节省了我的时间。谢谢。

Saaame，非常感谢！

【参考方案2】：

我也遇到了这个问题，结果发现错误被抛出，因为我的 import 语句有括号，这意味着我什么也没返回

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

删除括号后，一切正常，因为我实际上并没有返回任何东西。

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