I am currently utilizing Material-ui. Following the project build with npm run build, I encounter a blank page when running npm run serve.
I attempted to set homepage: "./" in the package.json as suggested here, however, it still displays a blank page. Is this related to MUI or is there something missing in my code?
Upon checking the browser console, I encountered 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 };although it renders correctly during local development