Theme locally not loaded from cookie

[kwiat1990]

Hey, I have implemented the entire logic for the theme toggler and I've noticed that in the dev mode the theme won't get loaded from cookie. What's more, after adding code to _app.tsx I also start experiencing FOUC.

[rtivital]

Make sure you are not using emotionOptions, this prop is not supported for ssr at this moment.

[kwiat1990]

As far as I know, I don't use any emotion related Staff directly.

My _app.tsx has following code (session is related to NextAuth), so it's the same as in this repo:

function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps & { colorScheme: ColorScheme }) {
  const [colorScheme, setColorScheme] = useState<ColorScheme>(
    pageProps.colorScheme
  );

  const toggleColorScheme = (value?: ColorScheme) => {
    const nextColorScheme =
      value || (colorScheme === "dark" ? "light" : "dark");
    setColorScheme(nextColorScheme);
    setCookies("mantine-color-scheme", nextColorScheme, {
      maxAge: 60 * 60 * 24 * 30,
    });
  };
  
  useEffect(() => {
    (async () => {
      const data = await getSession();
      if (data?.jwt) {
        setAutorizationHeader(data.jwt);
      }
    })();
  }, [session]);

  return (
    <>
      ...

      <ColorSchemeProvider
        colorScheme={colorScheme}
        toggleColorScheme={toggleColorScheme}
      >
        <MantineProvider
          theme={{ colorScheme, primaryColor: "violet" }}
          withGlobalStyles
          withNormalizeCSS
        >
          <SessionProvider session={session}>
            <Shell>
              <MDXProvider components={MDXComponents}>
                <Component {...pageProps} />
              </MDXProvider>
            </Shell>
          </SessionProvider>
        </MantineProvider>
      </ColorSchemeProvider>
    </>
  );
}

export default App;

App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  colorScheme: getCookie("mantine-color-scheme", ctx) || "light",
});

I also see that the cookie it correctly set and updated.

EDIT: I have changed the props object to what one can see in the template and the restoring theme from cookie seems to work. Oddly enough if a build and then serve the app, it doesn't work although the cookie won't get updated. The FOUC problem in both cases persists.

[PR7JW7L]

Experiencing FOUC with next-12.1.6. Everything works on 12.1.4.

[kwiat1990]

@PR7JW7L I have moved from npm to yarn and downgraded Next but it didn't really help. I can still see FOUC.

"dependencies": {
    "@mantine/core": "^4.2.6",
    "@mantine/form": "^4.2.6",
    "@mantine/hooks": "^4.2.6",
    "@mantine/next": "^4.2.6",
    "@mantine/notifications": "^4.2.6",
    "@mdx-js/react": "^2.1.1",
    "@next-auth/prisma-adapter": "^1.0.3",
    "@prisma/client": "3.14.0",
    "@types/umami": "^0.1.0",
    "axios": "^0.27.2",
    "cookies-next": "^2.0.4",
    "hast-util-select": "^5.0.1",
    "lodash.debounce": "^4.0.8",
    "next": "^12.1.4",
    "next-auth": "^4.3.4",
    "next-mdx-remote": "^4.0.3",
    "pg": "^8.7.3",
    "plaiceholder": "^2.3.0",
    "qs": "^6.10.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-event-hook": "^3.0.4",
    "react-icons": "^4.3.1",
    "remark-unwrap-images": "^3.0.1"
  },
  "devDependencies": {
    "@types/lodash.debounce": "^4.0.7",
    "@types/node": "^17.0.34",
    "@types/qs": "^6.9.7",
    "@types/react": "^18.0.8",
    "@types/react-dom": "^18.0.4",
    "eslint": "^8.16.0",
    "eslint-config-mantine": "1.1.0",
    "eslint-config-next": "^12.1.6",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.3.0",
    "husky": "^8.0.1",
    "lint-staged": "^12.4.1",
    "prettier": "^2.6.2",
    "prisma": "3.14.0",
    "typescript": "^4.6.4"
  }

[kwiat1990]

It's also worth noting that updating packages from the template seems to be not so easy as a few of them have peer dependencies, which don't play nicely with the newest versions of those packages. I have tried to use yarn in my app but it makes even more problems with some dependencies and doesn't resolve FOUC problem.

[Curve]

I'm experiencing the same problem.

It works when I run yarn dev however when i run yarn export && yarn start the default theme is selected rather than the one saved in the cookie. I'm using the unmodified _app.tsx, however I have updated the packages

[rtivital]

Cookies will not work for export command as ssr is disabled.

[Curve]

Cookies will not work for export command as ssr is disabled.

Thanks!

[davevanhoorn]

Experiencing FOUC with next-12.1.6. Everything works on 12.1.4.

Also experiencing FOUC here.

Downgraded to "next": "12.1.4", and "@types/react": "18.0.1" to fix it.

[ruslanguns]

Wondering if any of you could find a work around for this issue?