Can't import the browser build using a bundler

[ggcaponetto]

Version

3.6.0 - Browser

Expectation

I should be able to import the module with a bundler like webpack.

The online demo shows how to import the cardano-addresses module served from a webserver root.

Actual Behaviour

Unfortunately I am not able to reproduce the sample in this stackblitz example.

import React, { Component, useEffect, useState } from 'react';
import { render } from 'react-dom';
function App() {
  const [info, setInfo] = useState(null);
  const [cardanoAddresses, setCardanoAddresses] = useState(null);
  const addr =
    'addr1gqtnpvdhqrtpd4g424fcaq7k0ufuzyadt7djygf8qdyzevuph3wczvf2dwyx5u';
  useEffect(() => {
    import('cardano-addresses/dist/cardano-addresses.esm.js').then((mod) => {
      console.log('imported cardano-addresses module', mod);
      setCardanoAddresses(mod);
    });
  }, []);
  useEffect(() => {
    if (cardanoAddresses) {
      console.log('init', { addr, cardanoAddresses });
      cardanoAddresses
        .inspectAddress(addr)
        .then((info) => {
          console.log('address info is:', info);
          setInfo(info);
        })
        .catch((e) => {
          setInfo(e.message);
        });
    }
  }, [cardanoAddresses]);
  return (
    <div>
      <h4>cardano-address-react sample</h4>
      <p>{JSON.stringify(info)}</p>
    </div>
  );
}

render(<App />, document.getElementById('root'));

The import of cardano-addresses/dist/cardano-addresses.esm.js succeedes, but as soon as I call the cardanoAddresses.inspectAddress(addr) function, I get the error ./cardano-addresses-jsapi.cjs.js: ES module loading failed!. Any advice would be really appeciated!

[leobel]

Hi @ggcaponetto did you find a solution for this? I'm having the same issue using Angular.