构建后“npm run serve”上的空白页答案

【问题标题】：blank page on "npm run serve" after build构建后“npm run serve”上的空白页
【发布时间】：2022-01-18 17:18:51
【问题描述】：

我正在使用 Material-ui。使用npm run build 构建项目后，在运行npm run serve 时显示空白页我已经尝试在 package.json 中设置homepage: "./" 为here，它仍然显示空白页。是来自 MUI 还是我的代码中缺少某些内容。

在浏览器中检查控制台我得到this error。

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";
import { MoralisProvider } from "react-moralis";
import { App } from "./App";

const appID =
  process.env.REACT_APP_MORALIS_APP_ID;
const serverUrl =
  process.env.REACT_APP_MORALIS_SERVER_URL;

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider appId={appID} serverUrl={serverUrl}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

app.js

import Auth from "./components/header";
import Pannel from "./components/bottomNav";
import Profile from "./components/profile";
import Betting from "./components/betting";
import Raffle from "./components/raffle";

// import useMediaQuery from "@mui/material/useMediaQuery";
import { CssBaseline } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import React, { useMemo, useState } from "react";
import { Routes, Route } from "react-router-dom";

const ColorModeContext = React.createContext({ toggleColorMode: () => {} });

function App() {
  // const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
  // prefersDarkMode ? "dark" : "light"
  const [mode, setMode] = useState("dark");

  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          mode,
          primary: {
            main: "#ffff00",
            dark: "#10294c",
          },
          secondary: {
            main: "#ffb400",
          },
        },
      }),
    [mode]
  );

  const colorMode = useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
      },
    }),
    []
  );

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Auth />
        <Routes>
          <Route path="/" element={<Profile />} />
          <Route path="bet" element={<Betting />} />
          <Route path="lottery" element={<Raffle />} />
        </Routes>
        <Pannel />
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

export { App, ColorModeContext };

但是它在本地开发中正确呈现

【问题讨论】：

那个错误指的是什么？
react-dom.production.min.js
这没有帮助。请更具体，并将其放在您的问题帖子中，而不是在这里。

标签： javascript css reactjs material-ui

【解决方案1】：

我从断点处发现了这一点。事实证明，我在项目的某处使用了来自 usedapp/core 的 react useEffects 和 useEthers，这引发了 reactdom 无效变体错误。 useEthers 的 library 钩子是多余的，因为我没有为我的项目初始化 web3 提供程序

【讨论】：