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

Question

我正在尝试实现React 文档中提到的基于路由的代码拆分。

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

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，因此应用程序被包装在一个商店提供程序中：

    <Provider store={store}>
      <App />
    </Provider>

这是我的 tsconfig：

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>
  );
}

和包版本：

    "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",

这是GitHub 上的源代码和可能相关的问题。

Answer 1

在查看了我自己的问题之后，我想出了查看依赖项的方法。我react和react-dom在不同的主要版本上。

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

Answer 2

我也遇到了这个问题，事实证明，抛出错误是因为我的导入语句周围有括号，这意味着我没有返回任何内容

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

一旦我取下括号，一切就完美了，因为我实际上并没有返回任何东西。

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