graphql-ruby-client broken on React Native Web v18.0.0

[sealabcore]

Describe the bug

React Native Web on version 0.18.7 with latest version of the graphql-ruby-client 1.11.2 will not boot in production mode using npx expo start --no-dev --minify. When checking the console in Google Chrome we see it getting caught up on PusherLink.js line 54

Versions

graphql version: n/a rails (or other framework): Expo other applicable versions (graphql-batch, etc)

"@apollo/client": "^3.4.17", "expo": "^46.0.0", "graphql": "^15.5.1", "graphql-ruby-client": "^1.11.2", "pusher-js": "^7.4.0", "react": "18.0.0", "react-dom": "18.0.0", "react-native": "0.69.5", "react-native-web": "~0.18.7",

Steps to reproduce

Require import PusherLink from 'graphql-ruby-client/subscriptions/PusherLink';

Use PusherLink

    new ApolloClient({
      cache,
      link: from([
        authLink,
        errorLink,
        new PusherLink({ pusher: pusherClient }),
        createHttpLink({ uri: `${HOST}/graphql` }),
      ]),
    }),

Start expo app in production mode:

npx expo start --no-dev --minify

Visit http://localhost:19006/

Expected behavior

The React Native Web app should be able to boot.

Actual behavior

The React Native Web app does not boot.

Click to view exception backtrace

bootstrap:79 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at l (bootstrap:79:22)
    at Module.<anonymous> (index.js:1:1)
    at l (bootstrap:79:22)
    at Object.<anonymous> (PusherLink.js:54:14)
    at l (bootstrap:79:22)
    at 1005 (app.779dfd2b.chunk.js:1:168520)
    at l (bootstrap:79:22)
    at Module.<anonymous> (2.93b38988.chunk.js:2:5496990)
    at l (bootstrap:79:22)
    at 1033 (app.779dfd2b.chunk.js:1:1311685)
    at l (bootstrap:79:22)
    at t (bootstrap:45:15)
    at Array.r [as push] (bootstrap:32:11)
    at app.779dfd2b.chunk.js:1:43

Additional context

These docs are for Apollo 2, but this was working on Apollo 3 before the upgrade to Expo 46.

This may be related to the bug described in this thread, but we are importing the library correctly as described in this thread.

https://github.com/rmosolgo/graphql-ruby/issues/3607

I tried changing the import to import { PusherLink } from 'graphql-ruby-client';

And that changed the stacktrace to look like this:

bootstrap:79 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at l (bootstrap:79:22)
    at Module.<anonymous> (index.js:1:1)
    at l (bootstrap:79:22)
    at Object.<anonymous> (ActionCableLink.js:18:14)
    at l (bootstrap:79:22)
    at Object.<anonymous> (index.js:11:41)
    at l (bootstrap:79:22)
    at 1005 (app.e9526669.chunk.js:1:168520)
    at l (bootstrap:79:22)
    at Module.<anonymous> (2.28305c81.chunk.js:2:6313100)
    at l (bootstrap:79:22)
    at 1033 (app.e9526669.chunk.js:1:1311682)
    at l (bootstrap:79:22)
    at t (bootstrap:45:15)
    at Array.r [as push] (bootstrap:32:11)
    at app.e9526669.chunk.js:1:43

I also tried adding the noParse option, but that didn't change the error at all.

[sealabcore]

When clicking the PusherLink.js file in the console it shows line 54 as this transpiled version.

[sealabcore]

Copying this file into our app and changing the import to

import { ApolloLink, Observable, Observer, Operation, NextLink, FetchResult } from "@apollo/client"

Has fixed the app not booting issue.

Can this be changed in the next version of this library?

[rmosolgo]

How odd! Thanks for reporting this issue and sharing your fix. I'll try updating the imports in the library.

[rmosolgo]

I tried updating the imports, but it made the test suite fail locally like this:

 FAIL  src/subscriptions/__tests__/PusherLinkTest.ts
  ● Test suite failed to run

    Cannot find module 'react' from 'context.cjs'

    Require stack:
      node_modules/@apollo/client/react/context/context.cjs
      node_modules/@apollo/client/react/react.cjs
      node_modules/@apollo/client/main.cjs
      src/subscriptions/PusherLink.ts
      src/subscriptions/__tests__/PusherLinkTest.ts

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:299:11)
      at Object.<anonymous> (node_modules/@apollo/client/react/context/context.cjs:6:13)

So, I don't think I can just make the suggested change :S

Out of curiousity, does it boot fine when not in production mode?

[sealabcore]

Thanks for looking into it! Works totally fine when not booted in production mode.

[rmosolgo]

Sorry, I really don't have a guess at how to go forward on this. If anyone is still waiting on a fix for this in the library, please open an issue (or better yet, a PR 🙈 ) for a solution that works all around!