typeerror: _apollo_client__webpack_imported_module_0__.gql is not a function

[richardmtsr]

Intended outcome:
Using useQuery and gql results in a query being sent to GraphQL.

Actual outcome:
Compiler throws an error complaining that typeerror: _apollo_client__webpack_imported_module_0__.gql is not a function
The line in question in the below example is:
const { loading, error, data } = useGraphQLQuery(EXCHANGE_RATES);

How to reproduce the issue:

App.tsx

import {
    ApolloClient,
    InMemoryCache,
    ApolloProvider,
    gql
} from "@apollo/client";
import Thread from '../Thread';

const apolloClient = new ApolloClient({
    uri: 'https://48p1r2roz4.sse.codesandbox.io',
    cache: new InMemoryCache()
});

const App = () => (
    <ApolloProvider client={apolloClient}>
        <Thread />
    </ApolloProvider>
)

Thread.tsx

import {
    useQuery as useGraphQLQuery,
    gql
} from "@apollo/client";

export default function Thread() {

    const EXCHANGE_RATES = gql`
    query GetRates {
        rates(currency: "USD") {
          currency,
          rate
        }
      }
    `;
    
    const { loading, error, data } = useGraphQLQuery(EXCHANGE_RATES);

    return 'nothing';
}

Versions

System:
   OS: macOS 11.5.1
 Binaries:
   Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
   Yarn: 1.22.10 - /usr/local/bin/yarn
   npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
 Browsers:
   Chrome: 97.0.4692.99
   Safari: 14.1.2
 npmPackages:
   @apollo/client: ^3.5.8 => 3.5.8

package.json

{
  "name": "react-graphql",
  "version": "0.1.4",
  "license": "MIT",
  "scripts": {
    "start:tsc": "tsc -b -w --preserveWatchOutput",
    "start": "yarn start:tsc & razzle start",
    "build": "tsc -b && razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js",
    "version-bump": "yarn version --no-git-tag-version --no-git-tag-version"
  },
  "dependencies": {
    "@apollo/client": "^3.5.8",
    "@emotion/react": "^11.6.0",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.0.4",
    "@mui/material": "^5.0.4",
    "@mui/styled-engine-sc": "^5.0.3",
    "@mui/styles": "^5.2.3",
    "@types/serialize-javascript": "^5.0.1",
    "axios": "^0.21.1",
    "axios-auth-refresh": "^3.2.1",
    "babel-plugin-styled-components": "^1.12.0",
    "compression": "^1.7.4",
    "cookie-parser": "^1.4.6",
    "express": "^4.17.1",
    "graphql": "^16.2.0",
    "html-minifier": "^4.0.0",
    "razzle-plugin-typescript": "^4.2.7",
    "react": "^16.13.1",
    "react-cookie": "^4.1.1",
    "react-dfp": "^0.20.2",
    "react-dom": "^16.13.1",
    "react-icons": "^4.2.0",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.1.2",
    "redux-axios-middleware": "^4.0.1",
    "redux-devtools-extension": "^2.13.9",
    "styled-components": "^5.3.3",
    "universal-cookie": "^4.0.4"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@testing-library/user-event": "^10.1.0",
    "@types/axios": "0.14.0",
    "@types/compression": "^1.7.2",
    "@types/cookie-parser": "^1.4.2",
    "@types/express": "^4.17.6",
    "@types/html-minifier": "^4.0.1",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.13.2",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/react-redux": "7.1.16",
    "@types/react-router-dom": "^5.1.4",
    "@types/redux-mock-store": "^1.0.2",
    "@types/styled-components": "^5.1.9",
    "@types/webpack-env": "^1.15.2",
    "axios-mock-adapter": "^1.19.0",
    "babel-preset-razzle": "^4.2.7",
    "html-webpack-plugin": "4.5.2",
    "jest-mock-axios": "^4.5.0",
    "jest-styled-components": "^7.0.6",
    "mini-css-extract-plugin": "0.9.0",
    "postcss": "8.2.4",
    "razzle": "^4.2.7",
    "razzle-dev-utils": "^4.2.7",
    "redux-mock-store": "^1.5.4",
    "typescript": "^3.8.3",
    "webpack": "4.46.0",
    "webpack-dev-server": "3.11.0"
  },
  "resolutions": {
    "immer": "^9.0.6",
    "tslib": "^2.3.1"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|sass)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "moduleFileExtensions": [
      "mjs",
      "js",
      "json",
      "jsx",
      "ts",
      "tsx",
      "node"
    ]
  }
}

[raopg]

I'm getting the same error as well.

import { gql } from 'graphql-tag' works, whereas import { gql } from '@apollo/client' does not work.

[richardmtsr]

Thanks @raopg - i have seen this elsewhere but doesn't work for me, this yields a TypeError: Object(...) is not a function error on the same line.

Does anyone know what causes this issue? Might help me work around it. Seems strange that the import from @apollo/client doesn't work with it's own hooks.

[Nirmal-cod]

i am also getting this issue from earlier and i change the version of apollo client to 3.2.4 it works now again i am getting this issue
....adding graphql-tag also doesnot works ..

[raopg]

We ended up locking Apollo version to 3.4.16 and things are working.

[jenseng]

This may be a webpack misconfiguration. I ran into this issue with create-react-app, since its webpack config doesn't correctly handle .cjs file extensions (more info and fix here). @apollo/client uses this extension as of v3.5.x (previously it used *.cjs.js)

[iwakoscott]

Hello, 👋🏼 I am currently working on a React Native Expo project and I hit the .cjs issue and added a metro.config.js file with the following:

const { getDefaultConfig } = require('@expo/metro-config')

const config = getDefaultConfig(__dirname)

config.resolver.sourceExts.push('cjs')

module.exports = config

This indeed fixed the .cjs error but now I am stuck on a TypeError I can't seem to figure out -

TypeError: undefined is not a function (near '...(0, _client.gql)...')
- ... 9 more stack frames from framework internals

anyone else hitting this error?

Update:

It looks like having a root folder named graphql was causing a problem! I just renamed the folder and it seems like it is working again. 😅