tss-react
tss-react copied to clipboard
Published
20 hours ago •
garronej
garronej
Hard reload after any file change
I'm using tss-react with MUI in Next.js 13.4.7 with the pages router and I have configured it this way:
// _app.tsx
import { CssBaseline } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { Amplify } from "aws-amplify";
import awsExports from "aws-exports";
import { useUserActivityTracker } from "hooks/useUserActivityTracker";
import type { AppProps } from "next/app";
import theme from "theme";
import { createEmotionSsrAdvancedApproach } from "tss-react/next";
import AuthContextProvider from "context/auth-context";
import { MessagesProvider } from "components";
import { Layout } from "layout/Layout";
import { StateContainer } from "layout/StateContainer";
import "../styles/calendar.css";
import "../styles/globals.css";
Amplify.configure(awsExports);
const { augmentDocumentWithEmotionCache, withAppEmotionCache } =
createEmotionSsrAdvancedApproach({ key: "css" });
export { augmentDocumentWithEmotionCache };
function MyApp({ Component, pageProps }: AppProps) {
useUserActivityTracker();
return (
<ThemeProvider theme={theme}>
<AuthContextProvider>
<CssBaseline />
<MessagesProvider>
<StateContainer>
<Layout>
<Component {...pageProps} />
</Layout>
</StateContainer>
</MessagesProvider>
</AuthContextProvider>
</ThemeProvider>
);
}
export default withAppEmotionCache(MyApp);
// _document.tsx
import Document, { Html, Main, NextScript } from "next/document";
import { augmentDocumentWithEmotionCache } from "./_app";
class MyDocument extends Document {
render() {
return (
<Html>
<body>
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=XXXXXXX"
height="0"
width="0"
style={{ display: "none", visibility: "hidden" }}
></iframe>
</noscript>
<Main />
<NextScript />
</body>
</Html>
);
}
}
augmentDocumentWithEmotionCache(MyDocument);
export default MyDocument;
I do not know why, with this configuration, the entire page is hard-reloaded after every change, and this even occurs shortly after the DOM has been updated.
