Next.js Discord

Discord Forum

useContext is not a function

Answered
Caribbean Elaenia posted this in #help-forum
Open in Discord
Caribbean ElaeniaOP
I'm having a problem when using useContext in React and Next.js. It returns me an error: "Error: (0 , reactWEBPACK_IMPORTED_MODULE_1.useContext) is not a function"

Here is my ThemeContext.jsx:
"use client"

import { createContext, useState } from "react";

export const ThemeContext = createContext();

const initialTheme = 'light';

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(initialTheme);

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={[theme, toggleTheme]}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;


This is layout.jsx:
import "./static/styles/globals.css";
import ThemeProvider from './static/scripts/Context/ThemeContext';

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <body className={`flex justify-center items-center h-screen`}>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
};

export default RootLayout;


And this is the page.jsx:
import { useContext } from 'react';
import { getThemeClasses } from './static/scripts/ThemeClasses';

import { ThemeContext } from './static/scripts/Context/ThemeContext';

export default function Home() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  const { shortTextClass } = getThemeClasses(theme);

  return (
...
  );
}
Answered by joulev
then you need to make a new file and do something like this
View full answer

7 Replies

@joulev add "use client" to the page.jsx
Caribbean ElaeniaOP
But I also have:

"export const metadata = {
title: 'NetVerse',
}"

I forgot to include it because of lines limit
@Caribbean Elaenia But I also have: "export const metadata = { title: 'NetVerse', }" I forgot to include it because of lines limit
joulev
then you need to make a new file and do something like this
Answer
Caribbean ElaeniaOP
It worked.
Thank you so much!
So cool.