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

[pix2D]

Describe the bug

#8034 seems to have changed the way imports work by adding .js everywhere.

I use preset near-operation-file together with typescript-operations and typescript-react-query which now results in TS files with fragment imports like this:

import { BlaFragmentDoc } from './Bla.js'

In my Next.js app this now fails to compile with:

Module not found: Can't resolve './Bla.js'

Sorry I don't have time to make a repro repo. I provided my codegen.yml which should result in the same issue.

Your Example Website or App

Sorry I don't have time to make a repro 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

• NodeJS: v16.15.0

  "graphql": "^16.5.0",
  "@graphql-codegen/add": "^3.2.0",
  "@graphql-codegen/cli": "^2.8.0",
  "@graphql-codegen/near-operation-file-preset": "^2.3.0",
  "@graphql-codegen/typescript": "^2.7.0",
  "@graphql-codegen/typescript-operations": "^2.5.0",
  "@graphql-codegen/typescript-react-query": "^3.6.0",

Codegen Config File

overwrite: true
schema: 'schema.graphql'
hooks:
  afterAllFileWrite:
    - prettier --loglevel silent --write "**/*.{ts,tsx}"
documents:
  - 'src/**/*.graphql'
generates:
  src/types.ts:
    config:
      onlyOperationTypes: true
      useTypeImports: true
    plugins:
      - add:
          content: >
            /* eslint-disable */

            /**
             * WARNING: THIS FILE IS AUTO-GENERATED, DO NOT EDIT IT DIRECTLY!
             */

            export type Nullable<T> = {
              [P in keyof T]: T[P] | null
            }
      - typescript
  src:
    config:
      dedupeFragments: true
      exposeFetcher: true
      exposeQueryKeys: true
      fetcher: graphql-request
      preResolveTypes: true
      pureMagicComment: true
      useTypeImports: true
    preset: near-operation-file
    presetConfig:
      baseTypesPath: types.ts
      extension: .ts
    plugins:
      - add:
          content: >
            /* eslint-disable */

            /**
             * WARNING: THIS FILE IS AUTO-GENERATED, DO NOT EDIT IT DIRECTLY!
             */

      - typescript-operations
      - typescript-react-query

Additional context

No response

[n1ru4l]

Reproduction here: https://github.com/n1ru4l/next-js-dot-js-import

[n1ru4l]

Prepped a revert here: #8068

[n1ru4l]

Closed via #8068