lucid icon indicating copy to clipboard operation
lucid copied to clipboard

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

Open bigirishlion opened this issue 1 year ago • 12 comments

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

bigirishlion avatar Mar 23 '23 01:03 bigirishlion

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

alessandrokonrad avatar Mar 28 '23 12:03 alessandrokonrad

@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!

VladislavTonev avatar May 03 '23 07:05 VladislavTonev

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?

mPaella avatar May 09 '23 15:05 mPaella

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.

VladislavTonev avatar May 14 '23 01:05 VladislavTonev

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

emmanuel-musau avatar May 20 '23 12:05 emmanuel-musau

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

hgextracts avatar Jun 12 '23 08:06 hgextracts

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

nnamdiarimah avatar Jul 09 '23 20:07 nnamdiarimah

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

Varagos avatar Aug 05 '23 20:08 Varagos

This appears to be an issue with next fetching static content (see attached images). Screenshot 2023-09-06 at 10 34 54 AM Screenshot 2023-09-06 at 10 35 02 AM Screenshot 2023-09-06 at 10 36 31 AM

Any reasons this might be happening @alessandrokonrad ?

thaddeusdiamond avatar Sep 06 '23 15:09 thaddeusdiamond

Opened https://github.com/spacebudz/lucid/pull/220 which might provide a fix. Seems to be an issue with middleware usage of lucid specifically.

thaddeusdiamond avatar Sep 06 '23 19:09 thaddeusdiamond

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

HarunJr avatar Sep 18 '23 15:09 HarunJr

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

thaddeusdiamond avatar Sep 18 '23 18:09 thaddeusdiamond

Why this is still not fixed? I'm also having this error

openVietAnh avatar Nov 12 '24 14:11 openVietAnh