`TypeError: TextDecoder is not a constructor` when handling multiaddresses in browser

[da-kami]

• Version: libp2p 0.30.12
• Platform:
  • Firefox 87.0
  • Chrome `89.0.4389.114'
  • Platform: Darwin Kernel Version 20.3.0: Thu Jan 21 00:07:06 PST 2021; root:xnu-7195.81.3~1/RELEASE_X86_64 x86_64 macOs Big Sur 11.2.3
• Subsystem:

Type:

Bug

Severity:

Critical

Description:

When handling any kind of code that depends on https://github.com/multiformats/js-multibase the application crashes in the Browser with:

TypeError: TextDecoder is not a constructor
./node_modules/multiaddr/node_modules/multibase/src/util.js
node_modules/multiaddr/node_modules/multibase/src/util.js:6

  3 | // @ts-ignore
  4 | const { TextEncoder, TextDecoder } = require('web-encoding')
  5 | 
> 6 | const textDecoder = new TextDecoder()
  7 | /**
  8 |  * @param {ArrayBufferView|ArrayBuffer} bytes
  9 |  * @returns {string}

Test with Firefox and Chrome.

Using require for importing resulted in the same error.
Using multiaddr function like shown in the chat example https://github.com/libp2p/js-libp2p/blob/master/examples/chat/src/dialer.js#L33 resulted in the same error.

The problem seems to be related to how imports are handled in multibase.

Steps to reproduce the error:

I ran into this problem when building a PoC trying to connect to a rust-libp2p daemon with js-libp2p from the browser:
https://github.com/da-kami/js-libp2p-quote-poc

Note: I also did a pure Javascript version which failed with the same error.

Are we missing something for working with Mutiaddress in the browser or is this a bug?

[vasco-santos]

Hello @da-kami
We are working on updating all the dependencies to not use web-encoding, since we really not need it #904 . Meanwhile, for this version we are blocked on Gozala/web-encoding#21

[da-kami]

Hello @da-kami
We are working on updating all the dependencies to not use web-encoding, since we really not need it #904 . Meanwhile, for this version we are blocked on Gozala/web-encoding#21

Thanks for the quick reply! I subscribed to #904 but after a quick look on the dependencies, I am not sure #904 will resolve not depending on web-encoding anymore:

As far as I could see #904 updates multiaddr to 9.0.1 which depends on multibase 0.4.2, but that still depends on web-encoding:

https://github.com/multiformats/js-multiaddr/blob/v9.0.1/package.json#L41
https://github.com/multiformats/js-multibase/blob/v4.0.2/package.json#L35

[da-kami]

As a temporary quickfix we use yarn's resolutions feature to upgrade multibase and uint8arrays to the latest version which removes web-encoding:

https://github.com/da-kami/js-libp2p-quote-poc/blob/master/package.json#L23-L26

[vasco-santos]

Thanks for the quick reply! I subscribed to #904 but after a quick look on the dependencies, I am not sure #904 will resolve not depending on web-encoding anymore:

As far as I could see #904 updates multiaddr to 9.0.1 which depends on multibase 0.4.2, but that still depends on web-encoding:

multibase@4.0.3 was already shipped removing web-encoding. You can already install libp2p@0.31.0-rc.0 and try it out

[da-kami]

Thanks for the quick reply! I subscribed to #904 but after a quick look on the dependencies, I am not sure #904 will resolve not depending on web-encoding anymore:

As far as I could see #904 updates multiaddr to 9.0.1 which depends on multibase 0.4.2, but that still depends on web-encoding:

multibase@4.0.3 was already shipped removing web-encoding. You can already install libp2p@0.31.0-rc.0 and try it out

Thanks! I gave 0.31.0-rc.0 it a try earlier and ran into some other issues. Will see to report them in detail once I find time to dig through.

[D4nte]

Yes, facing an issue too when trying the release candidate:

../node_modules/libp2p/src/upgrader.js 315:14
Module parse failed: Cannot use keyword 'await' outside an async function (315:14)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|             stream,
|             protocol
>           } = await mss.select(protocols);
|           if (this.metrics) this.metrics.trackStream({
|             stream,

[vasco-santos]

The reported error is misleading as that await is wrapped by an async function: https://github.com/libp2p/js-libp2p/blob/master/src/upgrader.js#L257

I just tried our libp2p-in-the-browser example, which uses parcel+babel and does not have this issue. Per the original post, I see that you are using CRA for your project and this might be related to how dependencies are bundled.

We are checking the RC with js-ipfs that has an example using CRA as well, I will keep you posted if this leads to the same issue

[vasco-santos]

@D4nte we found the bug for CRA. You can try the latest rc: 0.31.0-rc.3.

This was the fix. Somehow CRA with inline types comments understands an async function as a regular function 🤷🏼

FYI, we will be shipping the final release soon

[D4nte]

@D4nte we found the bug for CRA. You can try the latest rc: 0.31.0-rc.3.

This was the fix. Somehow CRA with inline types comments understands an async function as a regular function 🤷🏼

FYI, we will be shipping the final release soon

@vasco-santos great thanks! I actually quickly tried rc.3 yesterday and it looked good but I had to log off so did not have time to double check. Will report once I do more testing.

[D4nte]

Ok I can confirm the error is gone with rc.3 :)