Can not resolve this package

[lemiesz]

ERROR in ./src/graphql/graphql.ts 2:0-86
Module not found: Error: Can't resolve '@graphql-typed-document-node/core' in '/local/home/lemiesz/Projects/[redacted]
@ ./src/graphql/fragment-masking.ts 5:0-40
@ ./src/graphql/index.ts 1:0-35 1:0-35
@ ./src/components/App.tsx 16:0-38 25:0-7
@ ./src/index.tsx 4:0-35 36:40-43

I am getting this error

My codegen config looks like this

const config: CodegenConfig = {
   schema: process.env.SCHEMA_URL_OVERRIDE!,
   documents: ['src/**/*.tsx'],
   ignoreNoDocuments: true,
   generates: {
       './src/graphql/': {
           preset: 'client',
           config: {
               documentMode: 'string',
           },
       },
       './src/apollo/apollo-client.generate.ts': {
           plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
           config: {
               withHooks: true,
           },
       },
       './schema.graphql': {
           plugins: ['schema-ast'],
           config: {
               includeDirectives: true,
           },
       },
   },
};

[saihaj]

Can you please share a minimal reproduction. You can either use StackBlitz, CodeSandbox or a public GitHub repo.

[samvv]

Can't give a minimal reproduction right now but I'm having the exact same error on a fresh project. I'm using:

• Vite 7.0.4
• graphql-codegen 5.0.7
• node 23.11.0

Here's my config:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: "./foobar.graphql",
  documents: "src/**/*.tsx",
  generates: {
    "src/gql/": {
      preset: "client",
      plugins: []
    }
  }
};

export default config;

Nothing special in vite.config.ts, it's the default:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

[samvv]

The issue is solved by adding type to statements like this in src/gql/graphql.ts:

import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';

But that should not be done by hand.

[samvv]

I see "main": "" in package.json of the core package. This seems to be the culprit.

[samvv]

This issue can be fixed by adding useTypeImports: true, as shown here:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'https://graphql.org/graphql/',
  documents: ['src/**/*.vue', '!src/gql/**/*'],
  generates: {
    './src/gql/': {
      preset: 'client',
      config: {
        useTypeImports: true,
      },
    },
  },
  hooks: { afterAllFileWrite: ['prettier --write'] },
};

export default config;