CODEWITHSUNDEEP
javascriptgraphqlapollo-client
Davit Gelovani
Davit Gelovani

Reputation: 169

SyntaxError: Named export 'ApolloClient' not found

I'm trying to create server with ApolloClient and GraphQL but got the following error:

SyntaxError: Named export 'ApolloClient' not found. The requested module '@apollo/client' is a CommonJS module, which may not support all module.exports as named exports.

my code looks like this:

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
})

const createApolloClient = () => {
  return new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
  })
}

export default createApolloClient

I tried

import pkg from '@apollo/client'
const { ApolloClient, InMemoryCache, createHttpLink } = pkg

but it didn't help

Upvotes: 14

Views: 5818

Answers (3)

Israel Saraiva
Israel Saraiva

Reputation: 75

Solution for me:

import { default as pkg } from '@apollo/client'
const { ApolloClient, ApolloProvider, InMemoryCache, createHttpLink } = pkg

Upvotes: 1

mabahamo
mabahamo

Reputation: 783

If you are using Typescript 5 you can fix this issue using "Bundler" in your tsconfig:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "strictNullChecks": true,
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "moduleResolution": "Bundler"
  }
}

Upvotes: 0

erwan
erwan

Reputation: 164

Good news @davit-gelovani

I reached to import Apollo the way you need, just like that :

import { ApolloClient, InMemoryCache } from "@apollo/client/core/core.cjs";
import { HttpLink } from "@apollo/client/link/http/http.cjs";

on @apollo/client version 3.7.0 🚀

Upvotes: 9

Related Questions