next 13 and lucid

[manupadillaph]

hello there ! I hope some one can help me. I been using lucid in next js 12 without problems, but now my site migrated to next 13. I dont know how to make it work, site build breaks with this messages:

'''Error occurred prerendering page "/". Read more: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.'''

I already have working lucid with next js 12 with:

'''webpack: (config) => { config.stats = 'verbose'; // or 'errors-only', 'minimal', etc. config.resolve.alias['react-native-sqlite-storage'] = false; config.experiments = { asyncWebAssembly: true, topLevelAwait: true, layers: true, // optional, with some bundlers/frameworks it doesn't work without } return config }, '''

If i comment the use of lucid, site builds And if i use some parts of lucid, site builds But for example when trying to import Emulator, site breaks as i shown before

'''import { Assets, Emulator } from "lucid-cardano"; const emulator = new Emulator([]);''''

It works for Assets for example, but not for Emulator class

I would appreciated any help

Does anybody have a full functional lucid-cardano setup for next js 13?

Regards!

[CreatureGeorge]

This is what I used to get it working. Just got it up and running.

https://jser.dev/2023-07-25-how-lazy-works-internally/

you will have to define your own delay class, but wrap the class that contains Lucid inside of the "LazyComponent"

[marcollilorenzo]

Same issue... There are any solution without using LazyComponents? 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`.