升级到 React 18 后 React App 未渲染

Question

`我的 React 应用程序运行完美，但升级到 React 18、mui v5 和 redux v5 后，它没有渲染任何内容。

在终端中我得到： webpack 编译成功 但在 Chrome 控制台中我得到：

`Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useContext @ react.development.js:1602
useReduxContext2 @ useReduxContext.ts:14
useSelector2 @ useSelector.ts:175
NoLogin @ auth.js:23
./src/routes/index.js @ index.js:9
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:22
fn @ hot module replacement:61
./src/routes/Routes.js @ index.js:13
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:22
fn @ hot module replacement:61
./src/App.js @ bundle.js:25
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:22
fn @ hot module replacement:61
./src/index.js @ Sidebar.js:420
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:22
(anonymous) @ startup:7
(anonymous) @ startup:7
Show 6 more frames
Show less
react.development.js:1618 

Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (react.development.js:1618:1)
    at useReduxContext2 (useReduxContext.ts:14:1)
    at useSelector2 (useSelector.ts:175:1)
    at NoLogin (auth.js:23:1)
    at ./src/routes/index.js (index.js:9:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./src/routes/Routes.js (index.js:13:1)
    at options.factory (react refresh:6:1)`

这是我的package.json

{
  "name": ********************,
  "version": "0.0.1",
  "private": true,
  "homepage": ********************
  "scripts": {
    "start": ********************
    "start:local": ********************
    "start:sg": ********************
    "build:dev": ********************
    "build": *********************
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 10",
    "not op_mini all"
  ],
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "dependencies": {
    "@date-io/date-fns": "^3.0.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@iconify/react": "^4.1.1",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.15",
    "@mui/styled-engine": "^5.15.14",
    "@mui/x-date-pickers": "^7.2.0",
    "@reduxjs/toolkit": "^2.2.3",
    "axios": "^1.6.8",
    "chart.js": "^4.4.2",
    "clsx": "^2.1.0",
    "date-fns": "^3.6.0",
    "env-cmd": "^10.1.0",
    "i18n-iso-countries": "^7.10.0",
    "immer": "^10.0.3",
    "material-ui-confirm": "^3.0.12",
    "moment": "^2.30.1",
    "mui-datatables": "^4.3.0",
    "notistack": "^3.0.1",
    "numeral": "^2.0.6",
    "polished": "^4.1.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.0 || ^18.0.0",
    "react-app-polyfill": "^3.0.0",
    "react-dom": "^17.0.0 || ^18.0.0",
    "react-feather": "^2.0.10",
    "react-perfect-scrollbar": "^1.5.8",
    "react-redux": "^9.1.1",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^5.0.1",
    "react-select": "^5.2.0",
    "redux": "^5.0.1",
    "redux-auth-wrapper": "^3.0.0",
    "redux-saga": "^1.1.3",
    "reselect": "^5.1.0",
    "styled-components": "^6.1.8",
    "url": "^0.11.3"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}

这是我的App.js

`import React from "react";
import { connect } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";
import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import { SnackbarProvider } from "notistack";

import maTheme from "./theme";
import Routes from "./routes/Routes";
import { ConfirmProvider } from 'material-ui-confirm';

const App = ({ theme }) => {
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={maTheme[theme.currentTheme]}>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <ConfirmProvider>
            <SnackbarProvider maxSnack={1}>
              <Routes />
            </SnackbarProvider>
          </ConfirmProvider>
        </LocalizationProvider>
      </ThemeProvider>
    </StyledEngineProvider>
  );
};

const ConnectedApp = connect(store => ({ theme: store.themeReducer }))(App);

function AppWithRouter() {
  return (
    <Router>
      <ConnectedApp/>
    </Router>
  );
}

export default AppWithRouter;`

这是我的index.js

`import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import store from './redux/store/index';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App tab="home"/>
    </Provider>
  </React.StrictMode>
);`

这是我的 Routes/index.js

import` React from "react";

import async from "../components/Async";

import { Truck } from "react-feather";
import {NeedsLogin, NoLogin} from "./auth";

// Auth components
const SignIn = NoLogin(() => import("../pages/auth/SignIn"));
const SignUp = async(() => import("../pages/auth/SignUp"));
const ForgotPassword = async(() => import("../pages/auth/ForgotPassword"));
const ResetPassword = async(() => import("../pages/auth/ResetPassword"));
const Page404 = async(() => import("../pages/auth/Page404"));
const Page500 = async(() => import("../pages/auth/Page500"));

// Pages components
const OnBoard = NeedsLogin(() => import("../pages/pages/OnBoard"));
const Institutions = NeedsLogin(() => import("../pages/pages/Institutions/Institutions"));
const LoginInstitutions = NeedsLogin(() => import("../pages/pages/Institutions/LoginInstitution"));
const Instances = NeedsLogin(() => import("../pages/pages/Instances/Instances"));
const EditInstance = NeedsLogin(() => import("../pages/pages/Instances/editInstance"));


//Account Routes
const MyAccount = NeedsLogin(() => import("../pages/pages/Account/MyAccount"));

const homeRoutes = {
  id: "Home",
  path: "/",
  component: OnBoard,
  children: null,
  hidden: true
};

const accountRoutes = {
  id: "My Account",
  path: "/my_account",
  component: MyAccount,
  children: null,
  hidden: true
};

const institutionsRoutes = {
  id: "Institutions",
  path: "/institutions",
  component: Institutions,
  children: null,
  hidden: true
};

const loginInstitutionsRoutes = {
  id: "Distribution Institutions",
  path: "/login_institutions",
  component: LoginInstitutions,
  icon: <Truck />,
  children: null,
};

const instancesRoutes = {
  id: "Instances",
  path: "/instances",
  component: Instances,
  children: null,
  hidden: true
};

const editInstanceRoutes = {
  id: "Edit Instance",
  path: "/editInstance",
  component: EditInstance,
  children: null,
  hidden: true
};

const authRoutes = {
  id: "Auth",
  path: "/auth",
  hidden: true,
  children: [
    {
      path: "/auth/sign-in",
      name: "Sign In",
      component: SignIn
    },
    {
      path: "/auth/sign-up",
      name: "Sign Up",
      component: SignUp
    },
    {
      path: "/auth/forgot-password",
      name: "Forgot Password",
      component: ForgotPassword
    },
    {
      path: "/reset_your_password/:id",
      name: "Reset Password",
      component: ResetPassword
    },
    {
      path: "/auth/404",
      name: "404 Page",
      component: Page404
    },
    {
      path: "/auth/500",
      name: "500 Page",
      component: Page500
    }
  ]
};


export const dashboard = [
  homeRoutes,
  accountRoutes,
  institutionsRoutes,
  instancesRoutes,
  editInstanceRoutes,
  loginInstitutionsRoutes
];

export const auth = [authRoutes];

export default [
  homeRoutes,
  accountRoutes,
  authRoutes,
  institutionsRoutes,
  instancesRoutes,
  editInstanceRoutes,
  loginInstitutionsRoutes
];`

这是我的 auth.js

`import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import Loader from '../components/Loader';

const NeedsLogin = ({ children }) => {
  const signedIn = useSelector(state => state.auth.signedIn);
  const loading = useSelector(state => state.auth.loading);
  const history = useNavigate();

  if (loading) {
    return <Loader />;
  }

  if (!signedIn) {
    history('/auth/sign-in');
    return null;
  }

  return children;
};

const NoLogin = ({ children }) => {
  const signedIn = useSelector(state => state.auth.signedIn);
  const loading = useSelector(state => state.auth.loading);
  const history = useNavigate();

  if (loading) {
    return <Loader />;
  }

  if (signedIn) {
    history('/');
    return null;
  }

  return children;
};

export { NeedsLogin, NoLogin };`

我尝试删除 React.StrictMode 并得到相同的结果。

我在我的项目中检查了react和react-dom版本：

npm ls react-dom

├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]
│ │ ├─┬ @floating-ui/[email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ @mui/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├── [email protected]
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
  └── [email protected] deduped

npm ls react

├─┬ @emotion/[email protected]
│ ├─┬ @emotion/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @emotion/[email protected]
│ └── [email protected] deduped
├─┬ @iconify/[email protected]
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]
│ │ ├─┬ @floating-ui/[email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ ├─┬ @mui/[email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ └── [email protected] deduped
├─┬ @reduxjs/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

我尝试卸载 mui-datatables 但还是一样。`

Answer 1

“反应”：“^18.0.0”， “react-dom”：“^18.0.0”

尝试在 package.json 文件中使用单一版本的react和react-dom（如上面提到的代码片段），卸载节点模块文件夹并执行全新的npm安装。