Cannot call a class as a function

[vaultec81]

Describe the bug
Cannot call a class as a function while using webpack in production

To Reproduce
Steps to reproduce the behavior:

1. Setup a react-app-rewired project.
2. Attempt to create a 3box ID as seen in the below screenshot.
3. Create a build production using npm run build. (Make sure to use production build not webpack dev server, dev server is unaffected)
4. Open the production build in your web browser of choice, open up the page at #/links in browser
5. Follow from step 2 below.

Optionally you can use the publicly available react example:

Steps:

1. Open up the webpage here
2. Hit the sign in button
3. Scan the QR code in an ethereum wallet such as ImToken. (Open console after this step)
4. Go through the signing prompts on the app
5. View error in console

Expected behavior
No error should be present.

Screenshots


The issue being triggered somewhere inside of the login code above, but due to webpack finding the actual line is tricky.. Will update this issue when I can isolate the exact line of code which is causing this issue

Ceramic versions

"@ceramicnetwork/http-client": "^0.10.2"
"@ceramicnetwork/doctype-tile": "^0.14.1"
"@ceramicstudio/idx-constants"

Additional context
This issue is not present when using the dev server for webpack/react
Using react-app-rewired
Similar to #1251

[vaultec81]

Isolated it down to this

cc: @michaelsena @Geo25rey @burk3

[oed]

@vaultec81 does the same code work in pure nodejs? Basically wondering if it's somehow due to react?

[vaultec81]

@oed Works perfectly fine in nodejs and in webpack dev server, but fails in production build. It's possible this issue is related solely to webpack, but still need a fix for this, especially considering ceramic http-client will likely be used in other projects utilizing webpack/react. Will keep experimenting to see what I can find.

[oed]

Ok, weird. @zachferland could you have a look at this when you get a chance?

[vaultec81]

Found a work around using https://unpkg.com/[email protected]/dist/threeid-provider.js in index.html. There are also webpack configuration available at https://github.com/ceramicstudio/js-3id-did-provider/blob/main/webpack.config.js which I have not tested but I would assume it works as the above dist is generated by webpack.
UPDATE: This fixed the issue for the threeIdProvider, but turns out the same issue is prevalent in ceramic http client as well.

[Geo25rey]

We just found a fix in the babel config. It requires @babel/[email protected] or higher.

{
  "assumptions": {
    "noClassCalls": true
  },
  "presets": ["@babel/preset-env"]
}

References:

• Basic Babel Assumptions
• No Class Calls Assumptions

[vaultec81]

I believe this issue is solved for us. Feel free to close this issue if desired. I do recommended providing webpack/browserified versions of all your modules.

[zachferland]

Finally tracked down, was introduced in https://github.com/ceramicnetwork/js-ceramic/pull/1059/files when adding our own hasInstance implementation for doc(stream)id and commitid and appears to be a bug in babel. Ref (old issue though and not exactly same, but similar) - babel/babel#4452.

Fails during runtime at classCallCheck -> https://github.com/babel/babel/blob/be03be1bc3bcfef96ad1c820731d4f7f50d80095/packages/babel-helpers/src/helpers.js
(not sure if this is same version, but classCallCheck does use instance of)

Also we have other babel/webpack builds that dont hit this issue, but create react app defaults do.

cc @ukstv