[Patch][codegen]Add file extensions to generated import paths for Node16/NodeNext compatibility

[lizkenyon]

Summary

Fixes TypeScript compilation errors for users with Node16/NodeNext module resolution strategies.

Problem

Users with moduleResolution: "Node16" or "NodeNext" in their tsconfig.json were getting compilation errors:

Cannot find module './admin.types' or its corresponding type declarations.

This prevented them from building TypeScript projects using the generated GraphQL types without manual workarounds after every codegen run.

Solution

Modified the preset to include file extensions (.d.ts or .ts) in generated import paths:

• Before: import type * as AdminTypes from './admin.types';
• After: import type * as AdminTypes from './admin.types.d.ts';

The fix:

1. Detects the output file extension from options.baseOutputDir
2. Uses the existing getOutputFiles() helper to get the correct types filename with full extension
3. Works for both declarations: true (.d.ts files) and declarations: false (.ts files)

Compatibility

Module Resolution	Before	After
bundler	✅ Works	✅ Works
node	✅ Works	✅ Works
Node16	❌ Failed	✅ Works
NodeNext	❌ Failed	✅ Works

Closes #2873

Testing

Steps to Reproduce the Bug

1. Create a New Shopify App

shopify app init --package-manager=pnpm
# Name your app (e.g., "test-module-resolution")
# Follow the prompts to complete setup
cd test-module-resolution

2. Modify tsconfig.json to Use NodeNext Module Resolution

Edit tsconfig.json and change the moduleResolution to NodeNext:

{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx", ".react-router/types/**/*"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "strict": true,
    "skipLibCheck": false,  // ⚠️ Change this to false to see the error
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "removeComments": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",  // ⚠️ Change this from "Bundler" to "NodeNext"
    "target": "ES2022",
    "baseUrl": ".",
    "types": ["@react-router/node", "vite/client", "@shopify/polaris-types"],
    "rootDirs": [".", "./.react-router/types"]
  }
}

Key changes:

• "moduleResolution": "NodeNext" (was "Bundler")
• "skipLibCheck": false (was true) - This is important to see the error!

4. Run GraphQL Codegen

pnpm run graphql-codegen

This will generate files in ./app/types/:

• admin.types.d.ts
• admin.generated.d.ts
• admin-2025-10.schema.json

5. Verify the Bug Exists

Check the generated import in app/types/admin.generated.d.ts:

head -5 app/types/admin.generated.d.ts

You should see (with the bug):

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

6. Run TypeScript to See the Error

npx tsc --noEmit --skipLibCheck false

You should see the error:

app/types/admin.generated.d.ts(4,34): error TS2307: Cannot find module './admin.types' or its corresponding type declarations.

Why this happens:

• The file is named admin.types.d.ts
• The import is from './admin.types'
• With moduleResolution: "NodeNext", TypeScript requires explicit file extensions
• TypeScript cannot resolve ./admin.types → admin.types.d.ts

---

Steps to Verify the Fix

1. Link the Fixed Local Version

Edit your app's package.json and add the following (adjust path as needed):

{
  "devDependencies": {
    "@shopify/api-codegen-preset": "file:../shopify-app-js/packages/api-clients/api-codegen-preset",
    // ... other deps
  },
  "resolutions": {
    "@shopify/api-codegen-preset": "file:../shopify-app-js/packages/api-clients/api-codegen-preset"
  },
  "overrides": {
    "@shopify/api-codegen-preset": "file:../shopify-app-js/packages/api-clients/api-codegen-preset"
  }
}

Note: Adjust the path based on where your shopify-app-js repo is located relative to your test app.

2. Reinstall Dependencies

pnpm install

3. Clean and Regenerate Types

rm -rf app/types
pnpm run graphql-codegen

4. Verify the Fix

Check the generated import again:

head -5 app/types/admin.generated.d.ts

You should now see (with the fix):

/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable eslint-comments/no-unlimited-disable */
/* eslint-disable */
import type * as AdminTypes from './admin.types.d.ts';  // ✅ Extension included!

5. Verify TypeScript Compiles

npx tsc --noEmit --skipLibCheck false

The admin.types error should be gone! ✅