Absinthe/Socket : JS Error - Uncaught TypeError: Cannot instantiate an arrow function

Phoenix Forum Questions / Help
,
1

I have been using absinthe for a while now, and a couple of months ago we switched from webpack to parcel for our JS bundling. All worked fine for some time, until recently I was notified by one of our clients that the site was no longer working, the wheel kept spinning. I investigated and found a JS error on calling AbsintheSocket.create was logged. The odd thing was that at first, the page still worked in dev, but after an upgrade of some npm stuff, it gave the same error. Initially my guess was something in parcel was causing this and as I had learned that phoenix 1.6 will prefer esbuild. I branched and tried that only to find that the same error still occurs.
Wanting to make sure it is not something else in my code that triggers this error, I cloned the phx_esbuild_demo repo that @josevalim was kind enough to provide. I added the @absinthe/socket npm package, imported it in js/app.js, and it triggers the same error.
I pushed the repo to github (Hermanverschooten/phx_esbuild_demo · GitHub, branch test_absinthe).
Has anyone else run into this error and found a solution? The only reference I find googling has to do with shadow-cljs, but I do not see any solution there.

2

In the mean time I found that replacing

import * as AbsintheSocket from '@absinthe/socket';

with

const AbsintheSocket = require '@absinthe/socket';

seems to work with esbuild but sadly not with parcel v2.0.0-rc.0.

3

The phx_esbuild_repo you link to is empty.

4

Oops, code is there now.

5

Having the same problem using parcel@2.0.0-rc.0:

Uncaught (in promise) TypeError: Cannot instantiate an arrow function
    at Object._newArrowCheck [as default] (newArrowCheck.js:7)
    at create1 (create.js:82) -

The shadow-cljs thread I believe @Hermanverschooten referred to: shadow-cljs 2018-08-10 | Slack Archive
Related github issue: Runtime Error - Cannot instantiate an arrow function · Issue #365 · thheller/shadow-cljs · GitHub

6

This problem is keeping me from upgrading to Phoenix 1.6. With require instead of import it works for esbuild with phx 1.5, but no longer with 1.6. I tried contacting the original creator of absinthe_socket through slack, but to no avail. And my JS knowledge is not good enough to rewrite.

7

Just for information, the require form now works with phoenix as of 1.6.2 :grinning:

8

I had the require fix working for a while with esbuild, but for unrelated reasons I recently started using esbuild’s inject feature and that has brought the Uncaught TypeError: Cannot instantiate an arrow function issue with @absinthe/socket back. When I use the inject option, I see the error, and when I take it out, everything’s fine.

Assuming it was an issue with using arrow function syntax, I even rewrote the @absinthe/socket library and published a version without arrow syntax under @absinthe-noarrows/socket but that doesn’t seem to fix the problem either. I’m completely at a loss. It seems like I either need to find a way to replace process.cwd() without using inject (which is needed for path-browserify), or I can’t use @absinthe/socket.

Anyone have any idea:

  1. How to fix this?
  2. Why using inject would cause it?
  3. Why getting rid of all of the arrow functions in the @absinthe/socket code wouldn’t fix it?
9

@neurodynamic do you remember fixing the issue by any chance? I am stuck on the same error too

10

Looking back through my commits, it looks like I eventually just gave up on using the inject feature. Sorry I don’t have better news!

11

okay thanks.

I have decided to update the dependencies and migrate to graphql-ws which should work as a drop-in replacement: Subscriptions Link - Apollo GraphQL Docs

Keep your fingers crossed ;D

1 Like
12

so in the end I keep using the @absinthe libs, the trick with replacing “import” with “require” actually seems to work for me