[nuxt] [request error] Directory import '...\.output\server\node_modules\@apollo\client\core' is not supported resolving ES modul es imported from ...\.output\server\chunks\server.mjs Did you mean to import @apollo/client/core/index.js?

Environment

Nuxt CLI v3.0.0-rc.3 14:35:02 RootDir: C:\Users\Ilya\Desktop\nuxt-app 14:35:06 Nuxt project info: 14:35:06

---

• Operating System: Windows_NT
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: yarn@1.22.15
• Builder: vite
• User Config: ssr
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://github.com/loremru/bug-reproduction

https://stackblitz.com/edit/github-pskqpw?file=package.json,nuxt.config.ts,app.vue,package-lock.json,graphql%2Fquery.js

yarn build yarn start

Describe the bug

Apollo Client doesnt work in a BUILD with SSR: true. In DEV or SSR off its ok.

[nuxt] [request error] Directory import ‘….output\server\node_modules@apollo\client\core’ is not supported resolving ES modul es imported from ….output\server\chunks\server.mjs Did you mean to import @apollo/client/core/index.js?

https://stackblitz.com/edit/github-pskqpw?file=package.json,nuxt.config.ts,app.vue,package-lock.json,graphql%2Fquery.js

yarn build yarn start

Additional context

No response

Logs

No response

[mekedron]

Hello everybody! You need to transpile all the modules which use @apollo/client. So if you use @vue/apollo-composable then you need to add this module to transpile section either.

defineNuxtConfig({
 build: {
   transpile: ['@apollo/client', '@vue/apollo-composable']
 }
})

Also you can transpile the modules only during building:

const lifecycle = process.env.npm_lifecycle_event

defineNuxtConfig({
  build: {
    transpile: lifecycle === 'build' || lifecycle === 'generate' ? ['@apollo/client', '@vue/apollo-composable'] : [],
  }
})

[manniL]

UPDATE: See https://github.com/nuxt/framework/issues/5023#issuecomment-1134698184 for the solution

---

Apollo should work fine on both, server and client side. But it likely must be transpiled.

Add '@apollo/client' and 'ts-invariant/process' to your transpile array in the nuxt.config.js/.ts

example:

defineNuxtConfig({
  build: {
    transpile: ['@apollo/client', 'ts-invariant/process']
  }
})