Generated queries in TypeScript do not compile with ESM

[dpilch]

Before opening, please confirm:

• I have installed the latest version of the Amplify CLI (see above), and confirmed that the issue still persists.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

v18.8.0

Amplify CLI Version

12.6.0

What operating system are you using?

Mac

Amplify Codegen Command

codegen statements

Describe the bug

When generating GraphQL queries with TypeScript the types import does not use correct module resolution for ESM.

src/graphql/mutations.ts:5:27 - error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean '../API.js'?

5 import * as APITypes from "../API";
                            ~~~~~~~~

src/graphql/queries.ts:5:27 - error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean '../API.js'?

5 import * as APITypes from "../API";
                            ~~~~~~~~

src/graphql/subscriptions.ts:5:27 - error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean '../API.js'?

5 import * as APITypes from "../API";
                            ~~~~~~~~

See for additional details: https://github.com/dpilch/codegen-esm-error

Expected behavior

The imports should have .js when using ESM.

Reproduction steps

See sample app here: https://github.com/dpilch/codegen-esm-error

GraphQL schema(s)

Any GraphQL schema will have this issue.

Log output

# Put your logs below this line
src/graphql/mutations.ts:5:27 - error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean '../API.js'?

5 import * as APITypes from "../API";
                            ~~~~~~~~

src/graphql/queries.ts:5:27 - error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean '../API.js'?

5 import * as APITypes from "../API";
                            ~~~~~~~~

src/graphql/subscriptions.ts:5:27 - error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean '../API.js'?

5 import * as APITypes from "../API";
                            ~~~~~~~~

Additional information

We will likely need to add a new codegen configuration for this option (such as moduleResolution).

[ErlendHer]

@dpilch Any update on this? It's somewhat frustrating having to manually add the .js extension to the imports in the generated code

Edit: For anybody having the same issue, and if you're using a Makefile, the below Makefile fixes it (run make update-imports)

GRAPHQL_SRC_DIR := packages/graphql/src

update-imports:
	@sed -i '' 's|import \* as APITypes from "./API";|import * as APITypes from "./API.js";|g' $(GRAPHQL_SRC_DIR)/mutations.ts
	@sed -i '' 's|import \* as APITypes from "./API";|import * as APITypes from "./API.js";|g' $(GRAPHQL_SRC_DIR)/queries.ts
	@sed -i '' 's|import \* as APITypes from "./API";|import * as APITypes from "./API.js";|g' $(GRAPHQL_SRC_DIR)/subscriptions.ts

graphql: amplify-codegen update-imports
graphql-force: amplify-codegen-force update-imports

amplify-codegen:
	amplify api gql-compile 
	amplify codegen --maxDepth 6
	amplify codegen models --maxDepth 6

amplify-codegen-force:
	amplify api gql-compile --allow-destructive-graphql-schema-updates
	amplify codegen --maxDepth 6
	amplify codegen models --maxDepth 6

[dpilch]

Sorry, no progress on this so far.