Bug in a dependency: timeout-abort-controller

[latenssi]

• Version: 0.27.3
• Platform: browser (create-react-app)
• Subsystem: timeout-abort-controller

Type: Bug

Severity: High

Description:

Bug in timeout-abort-controller package renders libp2p unusable in create-react-app build apps

I have created an issue in the repo of the package here: jacobheun/timeout-abort-controller#2

Steps to reproduce the error:

Build a create-react-app based app (npm run build), try to connect to a peer in the app via webrtc-star and you should get this error message in the debug logs:

libp2p:error could not connect to discovered peer TypeError: Failed to construct 'AbortController': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

[latenssi]

My create-react-app setup uses ES5 as target and as the author of the timeout-abort-controller package @jacobheun stated it will cause webpack to use a "_super.call(this) type of call" when transpiling the ES6 classes to ES5.

I am not closing this issue since others may have this same problem and I will let the maintainers of libp2p decide what to do with this issue.

I will use ES6 as target but others may not have that option

[jacobheun]

@latenssi are you using out of the box create-react-app or are you doing any special configuration? What version of create-react-app are you using?

It looks like babel 7+ is supposed to include https://github.com/WebReflection/babel-plugin-transform-builtin-classes by default which should fix this, if not and this is out of the box create-react-app, it will probably be best to update timeout-abort-controller to support built in classes better for legacy builds out of the box to avoid this.

[latenssi]

I am using the latest version of create-react-app (out of the box) and it does not seem to include that babel plugin you mentioned, only this one: babel-plugin-transform-classes and it does not fix the problem.

I encourage anyone hitting this issue to test out the plugin @jacobheun suggested but I must move on as my situation allows me to stick to plain ES6 classes.

@jacobheun I second you in that the best way to handle the issue is to update timeout-abort-controller to support ES5 transpiling.

[wemeetagain]

timeout-abort-controller is no longer a dependency