TypeError: (0 , _react.createContext) is not a function on Nextjs using Redux #49074

ritarpan-ghosh · 2023-05-02T08:45:33Z

ritarpan-ghosh
May 2, 2023

Summary

I'm working on a NextJS 13 project which uses redux. I used npm i react-redux @reduxjs/toolkit. I have configured everything, but as soon as I wrote const dispatch = useDispatch(), an error appeared ==== [TypeError: (0 , _react.createContext) is not a function
Can anyone help me?

store.ts:
`"use client"

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./features/cartSlice";

export const store = configureStore({
reducer: {
cart: cartReducer
},
});

export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;
`

provider.tsx:
`"use client";

import { store } from "./store";
import { Provider } from "react-redux";

export function Providers({ children }: { children: React.ReactNode }) {
return {children};
}
`

Answered by icyJoseph

May 2, 2023

Right, this is a server component, using async/await, and at the same time is trying to use a client side hook, such as useDispatch - to lay interactivity. That ain't gonna fly.

Please refer to, https://beta.nextjs.org/docs/rendering/server-and-client-components#when-to-use-server-vs-client-components:

So it is not only that dispatch won't work, but also the onClick won't work:

View full answer

icyJoseph · 2023-05-02T08:51:42Z

icyJoseph
May 2, 2023
Collaborator

Got a repository/code example to look at? Most likely You are using appDir and have not properly used the Redux Provider.

The Provider has to be used within a component marked as 'use client';, refer to this part of the docs: https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components

Basically, one file where it is just these contents, for example src/components/providers.js:

'use client';

import { ThemeProvider } from 'acme-theme'; // This should be the Redux provider


export function Providers({ children }) {
  return (
    <ThemeProvider>
        {children}
    </ThemeProvider>
  );
}

And then at your top layout:

import { Providers } from './components/providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

9 replies

ritarpan-ghosh May 2, 2023
Author

I have used "use client" in every redux related files.

icyJoseph May 2, 2023
Collaborator

Even when you invoke useDispatch?

ritarpan-ghosh May 2, 2023
Author

import { api } from "../../../http";
import Image from "next/image";
import { addToCart } from "../../redux/features/cartSlice";
import { useDispatch, useSelector } from "react-redux";

interface Params {
  params: {
    slug: string;
  };
}

const Product = async ({ params: { slug } }: Params) => {
  const dispatch = useDispatch();
  const addToCartButton = () => {
    dispatch(addToCart("dvhwk"))
  }
  const { data } = await api.get(`/api/products?filters[slug]=${slug}&populate=*`);
  // const  selector = useSelector((state:any)=>state.cartSlice.cartItems);
  // console.log(selector)
  return (
    <section className="text-gray-600 body-font overflow-hidden">
      <div className="container grid grid-cols-1 lg:grid-cols-2 px-2 my-4 mx-auto">
        <Image
          width={750}
          height={750}
          alt="ecommerce"
          className="object-cover object-center rounded"
          src={
            data.data[0].attributes.main_img.data.attributes.formats.large.url
          }
        />
        <div className="w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
          <h1 className="text-gray-900 text-3xl title-font font-medium mb-1">
            {data.data[0].attributes.title}
          </h1>
          <p className="leading-relaxed my-6">
            {data.data[0].attributes.description}
          </p>
          <div className="flex mt-10">
            <span className="title-font font-medium text-2xl text-gray-900">
            ₹{data.data[0].attributes.price}
            </span>
            <button className="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded" onClick={addToCartButton}>
              Add to Cart
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Product;

icyJoseph May 2, 2023
Collaborator

Right, this is a server component, using async/await, and at the same time is trying to use a client side hook, such as useDispatch - to lay interactivity. That ain't gonna fly.

Please refer to, https://beta.nextjs.org/docs/rendering/server-and-client-components#when-to-use-server-vs-client-components:

So it is not only that dispatch won't work, but also the onClick won't work:

Answer selected by ritarpan-ghosh

arman-ebrahimi Jun 16, 2024

Thanks, it fixed my problem too

Wendyooo7 Aug 26, 2024

Thank you! Also fixed my problem!

Zubair72AR Dec 21, 2024

I found same issue. I solved just typing "use Client" where ever I used useContext ........................ That is it

lamar-zm · 2024-03-12T12:18:02Z

lamar-zm
Mar 12, 2024

import Image from 'next/image'
import { useTranslation } from 'next-i18next';

function Content() {
const { t } = useTranslation();

return (
    <div className='p-8 flex flex-col gap-4'>

        <p className='text-title-color text-2xl font-bold'>{t('Messages')}</p>

        <div className="grid grid-cols-12 grid-rows-12 p-8 bg-white min-h-screen rounded-[16px]">
            <div className="col-span-12 row-span-12 flex flex-col items-center justify-center gap-5">
                <Image
                    src="/assets/messages/noMessages.svg"
                    alt={t('No_Messages_Available')}
                    width={100}
                    height={100}
                    className="object-cover ml-1"
                />
                <div className='flex flex-col items-center'>
                    <p className='text-title-color text-xl font-semibold'>{t('No_messages_yet')}</p>
                    <p className='text-paragraph-color text-lg'>{t('When_you_have_messages_,_you_will_see_them_here')}</p>
                </div>
            </div>
        </div>
    </div>
);

}

export default Content; im facing the same error except im not using any hooks for interactivity and as soon as i try to import the {useTranslation} from the i18next i get that error but when i do the "use client" it works just fine

4 replies

artemis-prime May 19, 2024

That's because you can't use a hook on a server component. That's the expected behavior

vishal590 Sep 4, 2024

import Image from 'next/image' import { useTranslation } from 'next-i18next';

function Content() { const { t } = useTranslation();

return (
    <div className='p-8 flex flex-col gap-4'>

        <p className='text-title-color text-2xl font-bold'>{t('Messages')}</p>

        <div className="grid grid-cols-12 grid-rows-12 p-8 bg-white min-h-screen rounded-[16px]">
            <div className="col-span-12 row-span-12 flex flex-col items-center justify-center gap-5">
                <Image
                    src="/assets/messages/noMessages.svg"
                    alt={t('No_Messages_Available')}
                    width={100}
                    height={100}
                    className="object-cover ml-1"
                />
                <div className='flex flex-col items-center'>
                    <p className='text-title-color text-xl font-semibold'>{t('No_messages_yet')}</p>
                    <p className='text-paragraph-color text-lg'>{t('When_you_have_messages_,_you_will_see_them_here')}</p>
                </div>
            </div>
        </div>
    </div>
);

}

export default Content; im facing the same error except im not using any hooks for interactivity and as soon as i try to import the {useTranslation} from the i18next i get that error but when i do the "use client" it works just fine

I use "use client", still facing same error "Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function"

Stianlars1 Sep 19, 2024

import Image from 'next/image' import { useTranslation } from 'next-i18next';
function Content() { const { t } = useTranslation();
return (
    <div className='p-8 flex flex-col gap-4'>

        <p className='text-title-color text-2xl font-bold'>{t('Messages')}</p>

        <div className="grid grid-cols-12 grid-rows-12 p-8 bg-white min-h-screen rounded-[16px]">
            <div className="col-span-12 row-span-12 flex flex-col items-center justify-center gap-5">
                <Image
                    src="/assets/messages/noMessages.svg"
                    alt={t('No_Messages_Available')}
                    width={100}
                    height={100}
                    className="object-cover ml-1"
                />
                <div className='flex flex-col items-center'>
                    <p className='text-title-color text-xl font-semibold'>{t('No_messages_yet')}</p>
                    <p className='text-paragraph-color text-lg'>{t('When_you_have_messages_,_you_will_see_them_here')}</p>
                </div>
            </div>
        </div>
    </div>
);
}
export default Content; im facing the same error except im not using any hooks for interactivity and as soon as i try to import the {useTranslation} from the i18next i get that error but when i do the "use client" it works just fine
I use "use client", still facing same error "Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function"

useTranslationrequires "use client" at top of the file. if this is a server component you should do this:

const texts = await getTranslation()

i figures it was better to just wrap my whole app with the NextIntlClientProvider, and passing the texts into the messages:

import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";


export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const texts = await getMessages();

  return (
    <html lang={locale}>
      <NextIntlClientProvider messages={messages}>
        <body>
           {children}
        </body>
      </NextIntlClientProvider>
    </html>
  );

then you can use the useTranslation().

oopsi, i think i just got found out that we are not talking about the same library. sorry

vishal590 Sep 20, 2024

I wrap that component in different file and declare it as client and import that in server component

amaroney55 · 2025-05-16T20:25:14Z

amaroney55
May 16, 2025

what answer???

0 replies

TypeError: (0 , _react.createContext) is not a function on Nextjs using Redux #49074

Uh oh!

Uh oh!

Summary

Replies: 3 comments · 13 replies

Uh oh!

icyJoseph May 2, 2023 Collaborator

Uh oh!

ritarpan-ghosh May 2, 2023 Author

Uh oh!

icyJoseph May 2, 2023 Collaborator

Uh oh!

ritarpan-ghosh May 2, 2023 Author

Uh oh!

Uh oh!

icyJoseph May 2, 2023 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 3 comments 13 replies

icyJoseph
May 2, 2023
Collaborator

ritarpan-ghosh May 2, 2023
Author

icyJoseph May 2, 2023
Collaborator

ritarpan-ghosh May 2, 2023
Author

icyJoseph May 2, 2023
Collaborator