Named export 'DefaultApolloClient' not found!

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

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

[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