spacebudz / lucid

Lucid is a library, which allows you to create Cardano transactions and off-chain code for your Plutus contracts in JavaScript, Deno and Node.js.
https://lucid.spacebudz.io
MIT License
341 stars 142 forks source link

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

Open bigirishlion opened 1 year ago

bigirishlion commented 1 year ago

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 commented 1 year ago

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

VladislavTonev commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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-musau commented 1 year ago

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

hgextracts commented 1 year ago

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

nnamdiarimah commented 1 year ago

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

Varagos commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

HarunJr commented 1 year ago

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

thaddeusdiamond commented 1 year ago

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

openVietAnh commented 2 weeks ago

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