Nextjs 14 and context

[marcollilorenzo]

I use Lucid with Nextjs 14

I have this context

'use client';

import {
  createContext,
  ReactNode,
  Suspense,
  useContext,
  useEffect,
  useState,
} from 'react';
import { Lucid } from 'lucid-cardano';

import { initLucid } from '@/lib/web3/cardano';

//types
interface LucidContextProps {
  children: ReactNode;
}

interface LucidContextInterface {
  lucid: Lucid | null;
}

// Constants
export type CARDANO_NETWORK = 'Mainnet' | 'Preview';
export const maestroKey = process.env.MAESTRO_KEY as string;
export const maestroNet = process.env.MAESTRO_NET as CARDANO_NETWORK;

// context init
export const LucidContext = createContext({} as LucidContextInterface);
export const useLucid = () => useContext(LucidContext);

// Provider
function LucidContextProvider({ children }: LucidContextProps) {
  // State
  const [lucid, setLucid] = useState<Lucid | null>(null);

  // Init
  const init = async () => {
    try {
      // Init lucid
      const lucidInstance = await initLucid();
      setLucid(lucidInstance);
    } catch (error) {
      console.error('LucidContextProvider', error);
    }
  };

  useEffect(() => {
    init();
  }, []);

  return (
    <LucidContext.Provider
      value={{
        lucid,
      }}
    >
      <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
    </LucidContext.Provider>
  );
}

export default LucidContextProvider;

And i import use di provider like this:

'use client';

import { lazy } from 'react';
import { ThemeProvider } from 'next-themes';

const LucidContextProvider = lazy(
  () => import('@/components/context/LucidContext')
);

export default function Providers({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (

      <LucidContextProvider>

          <ThemeProvider
            attribute='class'
            defaultTheme='light'
            enableSystem
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>

      </LucidContextProvider>

  );
}

If i try to use const {lucid} = useLucid() i notice this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `StaticGenerationSearchParamsBailoutProvider`.