Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – return value of a function is not iterable

I am building a project using next14.2.4 and mui5.15.20. Here are the parts of code I am getting problem at.

theme.js

"use client";
import { createTheme } from "@mui/material";
import { createContext, useMemo, useState } from "react";

//use different color palette for dark mode and white mode
export const tokens = (mode) => ({
  ...(mode === "dark"
    ? {
        white: {
          100: "#ffffff",
          200: "#fefdfc",
         //and so on
        },
        black: {
         //same as above
        },
        brown: {
          //same as above
        },
      }
    : {
        white: {
          //same as above
        },
        black: {
          //same as above
        },
        brown: {
          //same as above
        },
      }),
});

//mui theme settings
export const themeSettings = (mode) => {
  const colors = tokens(mode);

  return {
    palette: {
      mode: mode,
      ...(mode === "dark"
        ? {
            primary: {
              main: colors.black[500],
            },
            secondary: {
              main: colors.white[500],
            },
            background: {
              default: colors.black[500],
            },
          }
        : {
            primary: {
              main: colors.white[500],
            },
            secondary: {
              main: colors.black[500],
            },
            background: {
              default: colors.white[500],
            },
          }),
    },
    typography: {
      fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
      fontSize: 15,
    },
  };
};

export const ColorModeContext = createContext({
  toggleColorMode: () => {},
});

// theme.js
export const useMode = () => {
  const [mode, setMode] = useState("dark");
  const colorMode = useMemo(
    () => ({
      toggleColorMode: () =>
        setMode((prev) => (prev === "light" ? "dark" : "light")),
    }),
    []
  );
  const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
  return [theme, colorMode];
};

to use above custom theme in my project i have done following thing in my laayout.js.

import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, useMode } from "./theme";
import "./globals.css";

export const metadata = {
  title: "Blog App",
  description: "Simple blog app",
};

export default function RootLayout({ children }) {
  const [theme, mode] = useMode();
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider>
          <ColorModeContext.Provider value={colorMode}>
            <ThemeProvider theme={theme}>
              <CssBaseline />
              {children}
            </ThemeProvider>
          </ColorModeContext.Provider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

But it says following error:
Error: (0 , _theme__WEBPACK_IMPORTED_MODULE_1__.useMode) is not a function or its return value is not iterable

How can i resolve it?

Is this the correct way to use MUI in latest Nextjs. Beause somewhere i saw we have to make .js file in src directory to use it?

Tags:

2

Answers


  1. 0

    Your layout.js is a server component, add "use client" at the top of it.

    Login or Signup to reply.
  2. 0

    In your layout.js component, you need to add "use client" at top of it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search