Error on "typescript-react-apollo" plugin + vite: [vite] Named export 'gql' not found. The requested module '@apollo/client' is a CommonJS module, which may not support all module.exports as named exports

[mahmoudmoravej]

Which packages are impacted by your issue?

No response

Describe the bug

The generated schema.ts file starts with

import { gql } from "@apollo/client";
import * as Apollo from "@apollo/client";

It causes the following error:

[vite] Named export 'gql' not found. The requested module '@apollo/client' 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 '@apollo/client';
const {gql} = pkg;

the workaround is just adding /index to the above url. mycode gen config is:

const config: CodegenConfig = {
  schema: "graphql/schema.graphql",
  documents: ["app/**/*.graphql", "app/**/*.gql"], //try to find these files and generate the following based on them
  generates: {
    "./app/@types/graphql/schema.ts": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-apollo", 
      ],
      config: {
        withHooks: true,
        // useTypeImports: true,
        // emitLegacyCommonJSImports: true,
      },
    },
  },

(note: uncommenting the above lines didn't change the output)

Your Example Website or App

https://stackblitz.com/edit/github-rpu4tw?file=package.json,codegen.ts

Steps to Reproduce the Bug or Issue

just run the codegen in with Remix + Vite template

Expected behavior

import { gql } from "@apollo/client/index"; import * as Apollo from "@apollo/client/index";

Screenshots or Videos

No response

Platform

• OS: macOS
• NodeJS: v21.7.3
• graphql version: [e.g. 16.3.0] "@graphql-codegen/cli": "5.0.2", "@graphql-codegen/client-preset": "4.2.5", "@graphql-codegen/schema-ast": "^4.0.2", "@graphql-codegen/typescript-react-apollo": "^4.3.0",

Codegen Config File

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

dotenv.config();

const config: CodegenConfig = { schema: "graphql/schema.graphql", documents: ["app//*.graphql", "app//*.gql"], //try to find these files and generate the following based on them generates: { "./app/@types/graphql/schema.ts": { //preset: "client", //we don't need gql version plugins: [ "typescript", "typescript-operations", "typescript-react-apollo", //help on this plugin: https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-apollo ], config: { withHooks: true, // useTypeImports: true, // emitLegacyCommonJSImports: true,

    skipTypename: true,
  },
},

}, };

export default config;

Additional context

No response