Import package

[suenot]

Screenshot

Actual Behaviour

Server Error
SyntaxError: Named export 'parse' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const { parse, validate: graphqlValidate, execute: graphqlExecute, subscribe: graphqlSubscribe, getOperationAST, GraphQLError, } = pkg;

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/suenot/work_t2/futures-bot-react/node_modules/graphql-ws/lib/server.mjs (13)
ModuleJob._instantiate
internal/modules/esm/module_job.js (104:21)
async ModuleJob.run
internal/modules/esm/module_job.js (149:5)
async Loader.import
internal/modules/esm/loader.js (166:24)

My code

import { InMemoryCache, ApolloClient, ApolloProvider, split, HttpLink } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { ChakraProvider } from '@chakra-ui/react';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

const httpLink = new HttpLink({
  uri: 'http://localhost:9000/v1/graphql'
});

const wsLink = new GraphQLWsLink(createClient({
  url: "ws://localhost:9000/v1/graphql",
}));

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: splitLink,
});

function MyApp({ Component, pageProps }: AppProps) {
  return <QueryStoreProvider>
    <ApolloProvider client={client}>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </ApolloProvider>
  </QueryStoreProvider>
}

Debug Information

node -v
v14.15.5

arch
arm64

npm -v
6.14.11

"typescript": "4.8.4"

[enisdenjo]

Hey, you're using the ESM version of graphql-ws while using the CJS version of graphql. The problem is either with your bundler or graphql version.

[suenot]

My package.json:

{
  "name": "bot-react",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@apollo/client": "^3.7.0",
    "@chakra-ui/react": "^2.3.6",
    "@deep-foundation/hasura": "0.0.18",
    "@deep-foundation/store": "0.0.6",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-http": "^1.5.17",
    "apollo-link-ws": "^1.0.20",
    "apollo-utilities": "^1.3.4",
    "cross-env": "^7.0.3",
    "dotenv": "^16.0.3",
    "echarts": "^5.4.0",
    "echarts-for-react": "^3.0.2",
    "framer-motion": "^6.5.1",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "graphql-ws": "^5.11.2",
    "lightweight-charts": "^3.8.0",
    "moment": "^2.29.4",
    "net": "^1.0.2",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moment": "^1.1.2",
    "react-stockcharts": "^0.7.8",
    "subscriptions-transport-ws": "^0.11.0",
    "ws": "^8.9.0"
  },
  "devDependencies": {
    "@types/node": "18.11.0",
    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "eslint": "8.25.0",
    "eslint-config-next": "12.3.1",
    "typescript": "4.8.4"
  }
}

[suenot]

I use latest versions of graphql-ws and graphql.

[enisdenjo]

Then it's your bundler. If it cannot parse the JS as-is, it should transpile it.

[enisdenjo]

Oh and, if you're using SSR - make sure the graphql-ws client code runs in browser only (not during SSR).

[suenot]

I use nextjs. Maybe problem with SSR.

[enisdenjo]

Oh and, if you're using SSR - make sure the graphql-ws client code runs in browser only (not during SSR).

from #412 (reply in thread)

^ try this.

[suenot]

I tried to find solution, but spent more than 30 minutes. I don't understand how to wrap import graphql-ws.

[enisdenjo]

Oh and, if you're using SSR - make sure the graphql-ws client code runs in browser only (not during SSR).

from #412 (reply in thread)

First try this.

[enisdenjo]

BTW, graphql-ws is not the problem, graphql is.

[suenot]

Do you know, subscriptions-transport-ws package can SSR? I didn't find any information about this. But anyway I need to change ws to http when SSR.

[enisdenjo]

No, both packages depend on the WebSockets class which natively exists in the browser.

Oh and, if you're using SSR - make sure the graphql-ws client code runs in browser only (not during SSR).

from #412 (reply in thread)

Try this though...

[suenot]

I don't find solution for this problem. But I solve my task with wrapper library for apollo-client: https://github.com/deep-foundation/react-hasura

[enisdenjo]

Glad you got it working!