Shopify / shopify-app-js

MIT License
297 stars 117 forks source link

GraphQL Codegen does not work with ES Modules #1738

Open Hexatare opened 2 weeks ago

Hexatare commented 2 weeks ago

Issue summary

The GraphQL Codegen creates two files: admin.types.d.ts and admin.generated.d.ts. The codegen preset automatically adds an import statement at the top of the admin.generated.d.ts file to include the required base types. However, when using "type": "module" in the package.json, the import statement is invalid because you are required to specify the .js file extension. There is currently no way to configure this behavior to allow the codegen to generate the correct import path with the .js extension. This means that I have to manually update the generated files after each codegen run or copy the code from the repository.

Expected behavior

There should either be an option to update the import or the codegen should detect when it is used inside an ESM module.

Actual behavior

The import statement in the generated admin.generated.d.ts file does not include the required .js extension when using "type": "module" in package.json, resulting in an invalid import. This forces developers to either manually edit the file after each codegen run or maintain a custom codegen setup.

Steps to reproduce the problem

  1. Set "type": "module" in package.json.
  2. Run the GraphQL codegen.
  3. Inspect the generated admin.generated.d.ts file.
  4. Notice the incorrect import statement that doesn't include the .js extension, causing issues when trying to import from admin.types.

Debug logs

The generated output looks like this:

/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable eslint-comments/no-unlimited-disable */
/* eslint-disable */
import type * as AdminTypes from './admin.types';

...
lizkenyon commented 2 weeks ago

Thank you for flagging the team will look into this.