Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot call a class as a function #1311

Open
vaultec81 opened this issue Apr 22, 2021 · 8 comments
Open

Cannot call a class as a function #1311

vaultec81 opened this issue Apr 22, 2021 · 8 comments
Assignees
Labels
bug Something isn't working dependencies Pull requests that update a dependency file

Comments

@vaultec81
Copy link

vaultec81 commented Apr 22, 2021

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
err1
code1
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
Copy link
Author

Isolated it down to this
err2
cc: @michaelsena @Geo25rey @burk3

@oed
Copy link
Member

oed commented Apr 22, 2021

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

@vaultec81
Copy link
Author

vaultec81 commented Apr 22, 2021

@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 oed added bug Something isn't working dependencies Pull requests that update a dependency file labels Apr 22, 2021
@oed
Copy link
Member

oed commented Apr 22, 2021

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

@vaultec81
Copy link
Author

vaultec81 commented Apr 22, 2021

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
Copy link
Contributor

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

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

References:

@vaultec81
Copy link
Author

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working dependencies Pull requests that update a dependency file
Projects
None yet
Development

No branches or pull requests

4 participants