SyntaxError: Named export 'ApolloClient' not found

Question

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

Feoff

What version of Apollo Client? – Studding

@HumbleDeveloper01 I created new project but result is same – Feoff

@DaveNewton Version is - 3.5.10 – Feoff

try to update last version and remove old version – Faulty

@HumbleDeveloper01 That's the latest non-beta version. – Studding

Could you share some detail about your use case where the Apollo Client is needing to be exported? Typically a component is used to query data from the client which appears to be the opposite of the pattern being used here. – Mccormick

How are you running ES modules? Where is this code executed (in the browser, in nodejs, something else)? Are you using any transpilation or bundling tools? What exactly is throwing that error, is there a stack trace? – Popery

Answer 1

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 🚀

Raiment

Answer 2

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"
  }
}

Shavonneshaw

Answer 3

Solution for me:

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

Stelly