VSCode shows error when adding plugin-graphql to Nuxt's nuxt.config.ts

[sdr0x07b6]

nuxt.config.ts

import graphql from '@rollup/plugin-graphql'

export default defineNuxtConfig({
  ...

  vite: {
    // for Frontend
    plugins: [graphql()],
  },

  nitro: {
    rollupConfig: {
      // for Backend
      plugins: [graphql()],
    },
  },
});

When added in this way, it works fine in operation.
However, on the VSCode editor, an error is displayed at the graphql() point on the nitro side.

Type instantiation can be very deep and infinite. ts(2589)
(alias) graphql(options?: RollupGraphqlOptions | undefined): Plugin<any>
import graphql
Convert .gql/.graphql files to ES6 modules

Is this an error that only occurs with nuxt.config.ts?
How can I resolve this?

• @rollup/plugin-graphql v2.0.3
• Nuxt v3.7.3
• Nodejs v18.18.0
• macOS 13.5 Apple Silicon M2

[shellscape]

Converted to Q&A discussion as this doesn't meet our requirements for an issue. Might want to run this by vscode or nuxt folks

[paulvonber]

exactly same issue, anybody got clue how to fix it?

[potatohoney-p]

I can reproduce TS2589 on the Nitro-side graphql() with Nuxt 3.7.3, Nitro 2.6.3, @rollup/plugin-graphql 2.0.3, Rollup 3.29.3, and TypeScript 5.2.2. It also appears with command-line tsc, so this reproduction is not specific to VS Code.

A workaround that keeps type checking (without as any or @ts-ignore) is to add the backend plugin through Nitro's rollup:before hook instead of the nested nitro.rollupConfig.plugins configuration:

import { defineNuxtConfig } from 'nuxt/config';
import graphql from '@rollup/plugin-graphql';

export default defineNuxtConfig({
  vite: {
    plugins: [graphql()],
  },
  nitro: {
    hooks: {
      'rollup:before': (_nitro, config) => {
        config.plugins = [config.plugins, graphql()];
      },
    },
  },
});

Remove the original nitro.rollupConfig.plugins: [graphql()] entry when using this. The nested array preserves existing plugins; Rollup accepts nested plugin arrays. The hook receives the concrete Rollup configuration, avoiding the problematic nested Nuxt configuration expression. Nitro 2.6.3 exposes this hook in its typed hook interface.

Verification on that pinned dependency set:

• Original configuration: tsc reports TS2589 at the Nitro graphql() call.
• Hook configuration: tsc passes with strict: true and no casts. Both checks used skipLibCheck: true; that option alone did not fix the original error.
• Executing the hook preserves an existing plugin and adds GraphQL. Building a .graphql query with the resulting Rollup plugins succeeds without warnings, and importing the bundle returns the expected GraphQL Document with its operation name.

This was an isolated configuration/type-check and GraphQL bundle test on Node 24/Linux, not a full Nuxt application build or a reproduction of your macOS/Node 18 editor environment. Also keep the lockfile when comparing: installing this old Nuxt version with today's unconstrained transitive dependencies initially gave me a different Rollup 3/4 plugin-type incompatibility. That is separate from the TS2589 reproduced above.