Named export 'DefaultApolloClient' not found!

[shamscorner]

The following error is happening when building the project (pnpm build). However, pnpm dev is working fine and graphql is also fetching data properly. You can try with this Repository if you want. Everything is set up, just clone and run pnpm build.

App.vue setup

<script setup lang="ts">
import { DefaultApolloClient } from '@vue/apollo-composable' // -> not found here but it exists
import { apolloClient } from './common/ApolloClient'

// https://v4.apollo.vuejs.org/
provide(DefaultApolloClient, apolloClient)

// https://github.com/vueuse/head
// you can use this to manipulate the document head in any components,
// they will be rendered correctly in the html results with vite-ssg
useHead({
  title: 'Vitesse',
  meta: [
    { name: 'description', content: 'Opinionated Vite Starter Template' },
  ],
})
</script>

<template>
  <RouterView />
</template>

Console error when running pnpm build

file:///Users/shamscorner/Projects/vitesse-stackter-clean-architect/.vite-ssg-temp/main.mjs:27
import { useQuery, DefaultApolloClient } from "@vue/apollo-composable";
                   ^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'DefaultApolloClient' not found. The requested module '@vue/apollo-composable' 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 '@vue/apollo-composable';
const { useQuery, DefaultApolloClient } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:341:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.build (/Users/shamscorner/Projects/vitesse-stackter-clean-architect/node_modules/.pnpm/vite-ssg@0.19.2_uhne5wm5qpolinapsgjqcugibi/node_modules/vite-ssg/dist/chunks/build.cjs:171:87)
    at async Object.handler (/Users/shamscorner/Projects/vitesse-stackter-clean-architect/node_modules/.pnpm/vite-ssg@0.19.2_uhne5wm5qpolinapsgjqcugibi/node_modules/vite-ssg/dist/node/cli.cjs:25:3)

[userquin]

@shamscorner can you try adding format: 'cjs' to ssgOptions?

[userquin]

using cjs format won't work, we need to patch some entries on @apollo/client packages and change some imports on your repo, stay tuned, I've it working on local (I mean, build your repo):

[shamscorner]

@userquin Much appreciated that 🙂

[userquin]

@shamscorner

I've updated my fork here https://github.com/userquin/vitesse-stackter-clean-architect (check last commit), we only need to patch @vue/apollo-composable, @apollo/client/core and @apollo/client dependencies (check the postinstall script and the new scripts/patch.ts module, maybe you'll need to patch some other modules in the future) and also change 1 import on src/common/ApolloClient.ts module, check below.

These changes will allow you to use apollo with ESM with SSR/SSG.

// src/common/ApolloClient.ts
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client' // just remove the `core/index.js` from the original

[userquin]

My fork is using esno as dev dependency to allow run scripts/patch.ts on node, just install that dev dependency, once you have installed esno, included the postinstall script and added scripts/patch.ts module just run pnpm install and you will be able to build your repo.

[shamscorner]

Excellent! I really like this solution 😍. It is working as expected.
However, to resolve @apollo/client, do we have to add react as a dependency on the project? @userquin

[userquin]

Try removing the dependency, but it seems it is using some react stuff...

[userquin]

@shamscorner I cannot check removing the react dependency, can you confirm if it is required?

[websitevirtuoso]

I tried to use this patch but it didn't work for me
I pushed project to review.
https://github.com/websitevirtuoso/vite-ssg-apollo
I am getting error like this
DEV is not defined

I pulled your repo and it really works. but my project is much bigger. Hope maybe somebody may assist in it

[unscatty]

For anyone still facing this issue I found a workaround, after hours struggling, using pnpm-patch-i.

• Run npx pnpm-patch-i @vue/apollo-composable@<specific version>, I used version 4.0.0-beta.4. It's gonna open the editor in the patch folder.
• Edit the package.json file located in the root folder of the patch
• Add

"type": "module",
"sideEffects": false,

to the root of the JSON document, so it ends up something like this:

{
  // ...
  "type": "module",
  "sideEffects": false,
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.esm.js",
      "require": "./dist/index.js"
    },
    "./*": "./*"
  },
  // ...
}

• Save the file and go back to the first terminal. Select yes to commit the patch
• If you had used the script mentioned above Named export 'DefaultApolloClient' not found! #241 (comment)
  you will have to delete it because it changes exports for apollo libraries. Force install dependencies pnpm i --force

Now if you run pnpm run build using vite-ssg, it should work.

Tested using:

• Vitesse
• @vue/apollo-composable: 4.0.0-beta.4
• vite-ssg: ^0.22.1

Works with pnpm, not sure if it works with other package managers, but there is also https://github.com/ds300/patch-package and process should be the same