Can't read transactionbuilderconfigbuilder_new in React Vite app

[AimHigh0601]

As I was instantiating Lucid.new(), I got an error.

Error log:

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)

tsconfig.json

  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  optimizeDeps: {
    include: ["pdfjs-dist"], // optionally specify dependency name
    esbuildOptions: {
      supported: {
        "top-level-await": true,
      },
    },
  },
  plugins: [react()],
  build: {
    target: "esnext",
  },
  server: {
    host: "127.0.0.1",
  },
});

package.json

 "@types/node": "^16.18.37" 
 "lucid-cardano": "^0.10.6",
 "react": "^18.2.0",
 "vite": "^5.2.0"

Appreciate any help.

[web3techlord]

You seem to run the Lucid.new() method using lucid-cardano. I started my Cardano blockchain dev career 1 year ago. We need to enable some properties to fix the issue.

I did that with craco.config.js by adding the following properties.

asyncWebAssembly: true, 
lazyCompilation: false, 
syncWebAssembly: true, 
topLevelAwait: true

You have to do the same thing for lucid to work in vite app.

[AimHigh0601]

Thank you for your reply. I tried to use webpack loaders in vite, but it's failed.

[web3techlord]

You can't use webpack loaders in vite app mostly, you need to use vite plugins instead. You can also think about local dev server migration if you have to use lucid-cardano.

[AimHigh0601]

I found some links and tried them. Vite app still gives me an error, but it's another problem. This issue is solved.