NextJS - Cannot read properties of undefined (reading 'transactionbuilderconfigbuilder_new')

[bigirishlion]

I'm seeing this error when I try and instantiate Lucid.new(...). I've tried this with and without use-cardano. I've also verified that I'm getting the correct values back from the blockfrost.getProtocolParameters(). The network I'm trying to hit is Preview

Error stack:

TypeError: Cannot read properties of undefined (reading 'transactionbuilderconfigbuilder_new')
    at TransactionBuilderConfigBuilder.new (webpack-internal:///./node_modules/lucid-cardano/esm/src/core/libs/cardano_multiplatform_lib/cardano_multiplatform_lib.generated.js:18331:26)
    at Lucid.new (webpack-internal:///./node_modules/lucid-cardano/esm/src/lucid/lucid.js:78:119)

Any help is appreciated.

tsconfig.json

{
    "compilerOptions": {
        "target": "ES2020",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

next.config.js

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    webpack: (config) => {
        config.experiments = {
            asyncWebAssembly: true,
            topLevelAwait: true,
            layers: true // optional, with some bundlers/frameworks it doesn't work without
        };

        return config;
    }
};

module.exports = nextConfig;

Package.json

    "lucid-cardano": "^0.9.7",
    "next": "12.1.6",

Update: Looks like every works correctly on version 0.7.2

[alessandrokonrad]

Could you try out Lucid 0.9.8 and lemme know if it works with this version?

[VladislavTonev]

@alessandrokonrad Greetings! I receive the same error, using Chrome v113, node v18.16.0 Vue3 and lucid version 0.10.2. I also installed wasm-loader v1.3.0., unfortunatelly with no result. I've tried different versions of lucid, the error remains. Can it be a problem with configuration? I am open for discussion in discord if needed. Thank you in advance!

[mPaella]

Getting this as well on v0.10.4, nextjs v13.4.1

await Lucid.new(
                    new Blockfrost(LucidWrapper.getBlockFrostBaseUrl(), process.env.BLOCKFROST_PROJECT_ID as string),
                    LucidWrapper.getNetwork()
                )

TypeError: Cannot read properties of null (reading 'TransactionBuilderConfigBuilder')
    at Function.new (webpack-internal:///(api)/./node_modules/lucid-cardano/esm/src/lucid/lucid.js:77:81)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async BackOff.eval [as request] (webpack-internal:///(api)/./utils/cardano/LucidWrapper.ts:41:100)

webpack: (config, options) => {
        config.experiments = {
            ...config.experiments,
            asyncWebAssembly: true,
            layers: true,
            topLevelAwait: true,
        };

        config.resolve.fallback = {
            ...config.resolve.fallback,
            fs: false,
            os: false,
            path: false,
            crypto: false,
            process: require.resolve("process/browser"),
        };
        return config;
    },

It seems like the top level await isnt working, or its not being detected properly when C is imported?

[VladislavTonev]

Download one of these templates: https://meshjs.dev/starter-templates and use it as a starting point. I believe the setup works with lucid, because both libs use cardano serialization lib.

[Emmanuel-FSE]

I am getting the same error with angular, any solution will be much appreciated.

[hgextracts]

any updates on this also having same issue next js 13.4 and lucid 10.6

[nnamdiarimah]

I'm running into this issue in angular as well.

[Varagos]

Running into this issue as well with React when using webpack for bundling, any idea how we can solve it or what causes it?

[thaddeusdiamond]

This appears to be an issue with next fetching static content (see attached images).

Any reasons this might be happening @alessandrokonrad ?

[thaddeusdiamond]

Opened #220 which might provide a fix. Seems to be an issue with middleware usage of lucid specifically.

[HarunJr]

Getting similar issues with Next.js 13. Any solution yet?

[thaddeusdiamond]

I pushed a Pull Request (#220) for this and published it to this npm module: https://www.npmjs.com/package/lucid-cardano-nextjs