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

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>
  );
}

6 replies

ritarpan-ghosh May 2, 2023
Author

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

icyJoseph May 2, 2023

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

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

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

1 reply

artemis-prime May 19, 2024

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

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

ritarpan-ghosh May 2, 2023

Summary

Replies: 2 comments · 7 replies

icyJoseph May 2, 2023

ritarpan-ghosh May 2, 2023 Author

icyJoseph May 2, 2023

ritarpan-ghosh May 2, 2023 Author

icyJoseph May 2, 2023

lamar-zm Mar 12, 2024

artemis-prime May 19, 2024

ritarpan-ghosh
May 2, 2023

Replies: 2 comments 7 replies

icyJoseph
May 2, 2023

ritarpan-ghosh May 2, 2023
Author

ritarpan-ghosh May 2, 2023
Author

lamar-zm
Mar 12, 2024