cardano-serialization-lib-browser loaded as empty module in NextJS

Question

I'm trying to use cardano-serialization-lib in a NextJS project I'm working on, but I'm receiving an exception before initializing the application TypeError: Cannot read properties of undefined (reading 'from_address') in the following code

export const MINTING_POLICY_HASH = () => {
  const vh = Loader.Cardano.EnterpriseAddress.from_address(
    Loader.Cardano.Address.from_bech32(createAccountPolicyBechAddr)
  ).payment_cred()
  // ...
}

After digging a little bit, I found out that Loader.Cardano was returning a module, but an empty one, Loader is defined as follows:

class Loader {
  async load() {
    if (this._wasm) return;

    this._wasm = await import(
      "@emurgo/cardano-serialization-lib-browser"
    );
  }

  get Cardano() {
    return this._wasm;
  }
}

When I tried to print Loader.Cardano (after loading it with Loader.load() and waiting for it to actually be loaded), it gave me this:

Module {
  __esModule: true,
  Symbol(Symbol.toStringTag): 'Module'
}

Meaning, as I said, the module we are importing ("@emurgo/cardano-serialization-lib-browser") is weirdly giving us an empty result. I assume this has to do something with webpack or NextJS and the way they are handling WASM modules, here's my next.config.js:

/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,

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

    return config;
  },
};

I used cardano-serialization-lib twice already with gatsby and create-react-app, but never with NextJS, if anyone could help I would appreciate.

Answer 1

I do not know why, but this worked for me

this._wasm = await import(
      "../node_modules/@emurgo/cardano-serialization-lib-browser/cardano_serialization_lib_bg"

:s ES6 notation did not work.

my whole loader:

class Loader {
  async load() {
    if (this._wasm) {
      return;
    }
    /**
     * @private
     */
    this._wasm = await import(
      "../node_modules/@emurgo/cardano-serialization-lib-browser/cardano_serialization_lib_bg"
    );
  }

  get Cardano() {
    return this._wasm;
  }
}

export default new Loader();

Good luck!