<p>I do not know why, but this worked for me</p>
<pre><code>this._wasm = await import(
      &quot;../node_modules/@emurgo/cardano-serialization-lib-browser/cardano_serialization_lib_bg&quot;
</code></pre>
<p>:s ES6 notation did not work.</p>
<p>my whole loader:</p>
<pre><code>class Loader {
  async load() {
    if (this._wasm) {
      return;
    }
    /**
     * @private
     */
    this._wasm = await import(
      &quot;../node_modules/@emurgo/cardano-serialization-lib-browser/cardano_serialization_lib_bg&quot;
    );
  }

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

export default new Loader();
</code></pre>
<p>Good luck!</p>

CC BY-SA 4.0
2021-12-20T13:34:37.710Z
You saved my life, thank you. Spent two days trying to figure out what you did in minutes lol
Mateus
CC BY-SA 4.0
2021-12-20T12:34:08.093Z
2021-12-20T12:34:08.093Z
Alicia Basilio
<p>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 <code>TypeError: Cannot read properties of undefined (reading 'from_address')</code> in the following code</p>
<pre><code>export const MINTING_POLICY_HASH = () =&gt; {
  const vh = Loader.Cardano.EnterpriseAddress.from_address(
    Loader.Cardano.Address.from_bech32(createAccountPolicyBechAddr)
  ).payment_cred()
  // ...
}
</code></pre>
<p>After digging a little bit, I found out that <code>Loader.Cardano</code> was returning a module, but an empty one, <code>Loader</code> is defined as follows:</p>
<pre><code>class Loader {
  async load() {
    if (this._wasm) return;

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

  get Cardano() {
    return this._wasm;
  }
}
</code></pre>
<p>When I tried to print <code>Loader.Cardano</code> (after loading it with <code>Loader.load()</code> and waiting for it to actually be loaded), it gave me this:</p>
<pre><code>Module {
  __esModule: true,
  Symbol(Symbol.toStringTag): 'Module'
}
</code></pre>
<p>Meaning, as I said, the module we are importing (<code>&quot;@emurgo/cardano-serialization-lib-browser&quot;</code>) 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:</p>
<pre><code>/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,

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

    return config;
  },
};
</code></pre>
<p>I used cardano-serialization-lib twice already with gatsby and create-react-app, but never with NextJS, if anyone could help I would appreciate.</p>

<cardano-serialization-lib><javascript><reactjs>
cardano-serialization-lib-browser loaded as empty module in NextJS
# cardano-serialization-lib-browser loaded as empty module in NextJS

(Asked by: username_0 on 2021-12-20)

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.

**Tags:** cardano-serialization-lib, javascript, reactjs

---

## 1 answers

### Answer by username_1 on 2021-12-20. Score: 2 | Accepted answer

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!

> **Comments:**
> **username_0**: You saved my life, thank you. Spent two days trying to figure out what you did in minutes lol  

---

