near-operation-file + typescript-react-apollo = Failed to resolve .js import

[tpinne]

Describe the bug

I still have the same issues as in dotansimha/graphql-code-generator#8065 even with emitLegacyCommonJSImports: false.

Your Example Website or App

Currently I have no simple repo to provide. If you can't get anywhere without let me know. I try to find time to provide a stripped down repo.

Steps to Reproduce the Bug or Issue

1. Generate code using provided config
2. Import into Next.js app
3. Run dev server

Expected behavior

There should be no .js in the fragment filename.

Screenshots or Videos

No response

Platform

• OS: macOS, Linux
• NodeJS: 16.15.1, 16.17.0
• graphql version: 16.6.0
• @graphql-codegen/* version(s):

├─ @graphql-codegen/add@3.2.1
├─ @graphql-codegen/cli@2.12.0
│  └─ @graphql-codegen/plugin-helpers@2.7.0
├─ @graphql-codegen/core@2.6.2
├─ @graphql-codegen/fragment-matcher@3.3.1
├─ @graphql-codegen/introspection@2.2.1
├─ @graphql-codegen/near-operation-file-preset@2.4.1
├─ @graphql-codegen/plugin-helpers@2.6.2
├─ @graphql-codegen/schema-ast@2.5.1
├─ @graphql-codegen/typescript-apollo-client-helpers@2.2.3
├─ @graphql-codegen/typescript-operations@2.5.3
├─ @graphql-codegen/typescript-react-apollo@3.3.3
├─ @graphql-codegen/typescript@2.7.3
└─ @graphql-codegen/visitor-plugin-common@2.12.1

Codegen Config File

overwrite: true
schema: "src/graphql/Schema/*.graphqls"
documents: "src/graphql/**/*.graphql"
emitLegacyCommonJSImports: false
hooks:
  afterAllFileWrite:
    - prettier --write
config:
    avoidOptionals: true
    withComponent: false
    withHOC: false
    withHooks: true
    nonOptionalTypename: true
    preResolveTypes: true
    documentMode: documentNodeImportFragments
    pureMagicComment: true
    dedupeFragments: true
    scalars:
        Cursor: string
        Time: Date
generates:
    src/graphql/types.generated.ts:
        plugins:
            - add:
                  content: "/* eslint-disable */"
            - "typescript"
    src/utilities/Apollo/FragmentTypes.generated.ts:
        plugins:
            - add:
                  content: "/* eslint-disable */"
            - "fragment-matcher"
    src/utilities/Apollo/Helpers.generated.ts:
        plugins:
            - add:
                  content: "/* eslint-disable */"
            - "typescript-apollo-client-helpers"
    src/:
        preset: near-operation-file
        presetConfig:
            baseTypesPath: 'graphql/types.generated.ts'
            extension: .generated.tsx
        config:
          fetcher:
            endpoint: 'http://localhost/graphql'
        plugins:
            - add:
                  content: "/* eslint-disable */"
            - "typescript-operations"
            - add:
                  content: |
                      export type DummyTypeExport = Types.Exact<{ [key: string]: never }>;
            - "typescript-react-apollo"

Additional context

No response

[charlypoly]

Hi @tpinne,

Could you update all your @graphql-codegen/* packages to the last version?
A path has been released that should fix your issue.

[tpinne]

Hi @charlypoly,

I updated all packages but it made no difference. Still get generated files with .js imports.

Still output like this:

/* eslint-disable */
import * as Types from '../types.generated.js';

import { DocumentNode } from 'graphql';
import { ReadAchievementFragmentDoc } from '../Fragments/ReadAchievement.generated.js';
import { BookFragmentDoc } from '../Fragments/BookFragment.generated.js';
import { LevelAchievementFragmentDoc } from '../Fragments/LevelAchievementFragment.generated.js';
import { LevelFragmentDoc } from '../Fragments/Level.generated.js';
import * as Apollo from '@apollo/client';
export type DummyTypeExport = Types.Exact<{ [key: string]: never }>;
// ....

[Pewtro]

I can confirm that this is still happening @charlypoly, and that I have the latest versions:

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

const config: CodegenConfig = {
  overwrite: true,
  schema: 'http://localhost:4201/graphql',
  documents: ['src/**/!(*.d|*.generated).{ts,tsx}'],
  config: {
    maybeValue: 'T | null | undefined',
    scalars: {
      DateTime: 'Date',
    },
  },
  generates: {
    'src/globalTypes/index.ts': {
      plugins: ['typescript'],
      config: {
        onlyOperationTypes: true,
        skipTypename: true,
      },
    },
    'src/': {
      preset: 'near-operation-file',
      presetConfig: {
        baseTypesPath: 'globalTypes',
      },
      plugins: ['typescript-operations', 'typescript-react-apollo'],
      config: {
        withHooks: true,
        withMutationFn: true,
        documentMode: 'external',
        importDocumentNodeExternallyFrom: 'near-operation-file',
        inlineFragmentTypes: 'combine',
        skipTypename: true,
        emitLegacyCommonJSImports: false,
      },
    },
  },
  hooks: {
    beforeDone: ['prettier --write **/*.generated.ts', 'eslint --fix **/*.generated.ts --cache'],
  },
};

export default config;