Codesplit using Router给出'init is not a function‘错误

Question

我想执行React Codesplit。我已经按照React提供的文档进行了操作，但似乎显示了一个'init is not a function‘错误：

​

​

下面是我的代码：

import React, {lazy, Suspense} from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

const Privacy = lazy(() => import('./pages/PrivacyPolicies'));
const Home = lazy(() => import('./pages'));

const App = () => (
<Router>
  <Suspense fallback={<div>Loading...</div>}>
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route exact path="/privacy" component={Privacy}/>
  </Switch>
  </Suspense>
</Router>
);

export default App;

..。下面是我的package.json文件的相关部分：

  "dependencies": {
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "cloudinary-react": "^1.7.0",
    "emailjs-com": "^2.6.4",
    "html-react-parser": "0.0.4",
    "particles.js": "^2.0.0",
    "react-card-flip": "^1.1.1",
    "react-dom": "^17.0.2",
    "react-ga": "^3.3.0",
    "react-icons": "^4.2.0",
    "react-lazy-load-image-component": "^1.5.1",
    "react-particles-js": "^3.4.1",
    "react-progressive-graceful-image": "^0.6.13",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.2",
    "react-slick": "^0.28.1",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.0",
    "sweetalert": "^2.1.2"
  },
  "devDependencies": {
    "react": "^16.14.0"
  }

Answer 1

您使用的是react-dom和react包的不兼容版本:前者是^17.0.2，后者是^16.14.0。虽然差异可能看起来很细微，但它是足够实质性的，足以打破。

解决方案很简单:要么安装较新版本的React (您应该将其保存为常规依赖项，而不是dev依赖项)，要么将其余的库降级到16.x。