NextJs Unhandled Runtime Error: Element type is invalid

Question

I was creating an instagram clone from a youtube tutorial which was posted 1 year ago. There are many errors due to nextjs14, I've solved everyone until this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of RootLayout.

The code for GlobalContext.js is

import { globalReducer } from "../reducers/globalReducer";

const initialState = {
    user:{},
    isAuthenticated: false,
    isOnboarded: false,
    isLoading: false,
}

export const GlobalContext = createContext(initialState);
export const GlobalDispatchContext = createContext(null);

const GlobalContextProvider = ({ children }) => {

    const [state, dispatch] = useReducer(globalReducer, initialState)

  return (
    <GlobalContext.Provider value={state}>
      <GlobalDispatchContext.Provider value={dispatch}>
        {children}
      </GlobalDispatchContext.Provider>
    </GlobalContext.Provider>
  );
};

export default GlobalContextProvider; 

The code for layout.js is

import "./globals.css";
import GlobalContextProvider from "./state/context/GlobalContext";

export default function RootLayout( Component, pageProps ) {
  return (
    <GlobalContextProvider>
      <Component {...pageProps} />
    </GlobalContextProvider>
  );
}

All the imports and exports are correct as I have checked. Any solution?

I solved that layout.js was not CSR, but after solving it, it showed this error.

Answer 1

The first props of layout.js is React children and the second is params.

So your layout.js function should be like this:

export default function RootLayout({
  children,
  params,
})

Now, you're using:

<Component {...pageProps} />

Of course you'll get error. Because Component is not a valid React component. Remember, the first props of layout.js is react children not a component.

Check out the official docs for more info