`Can't resolve './api/index.js'` in typescript generated client

DylanBarber commented 3 months ago

What are you generating using Kiota, clients or plugins?

API Client/SDK

In what context or format are you using Kiota?

Mac executable

Client library/SDK language

TypeScript

Describe the bug

Using kiota to generate a typescript client from our swagger API. In the auto-generated code there are incorrect references to ./api/index.js even though they are generated as ./api/index.ts, given that this is a typescript client

This is preventing compilation.

My installed npm packages: "@microsoft/kiota-abstractions": "^1.0.0-preview.58", "@microsoft/kiota-http-fetchlibrary": "^1.0.0-preview.57", "@microsoft/kiota-serialization-form": "^1.0.0-preview.47", "@microsoft/kiota-serialization-json": "^1.0.0-preview.58", "@microsoft/kiota-serialization-multipart": "^1.0.0-preview.36", "@microsoft/kiota-serialization-text": "^1.0.0-preview.55",

Command I am running for generation: kiota generate --openapi {swagger.json url} --language typescript -o ./app/client/bffClient

Expected behavior

References to ./api/index.ts are changed to either ./api/index or ./api/index.ts

How to reproduce

Install the following packages in a blank Next JS repo

"@microsoft/kiota-abstractions": "^1.0.0-preview.58", "@microsoft/kiota-http-fetchlibrary": "^1.0.0-preview.57", "@microsoft/kiota-serialization-form": "^1.0.0-preview.47", "@microsoft/kiota-serialization-json": "^1.0.0-preview.58", "@microsoft/kiota-serialization-multipart": "^1.0.0-preview.36", "@microsoft/kiota-serialization-text": "^1.0.0-preview.55",

Run the following command: kiota generate --openapi {swagger.json url} --language typescript -o ./app/client/bffClient

Attempt to run the app with npm run dev

Open API description file

This is a protected asset of our company and is believed to be agnostic to the issue

Kiota Version

1.16.0

Latest Kiota version known to work for scenario above?(Not required)

No response

Known Workarounds

Manually going in to the generated client and changing file references (Not optimal)

Configuration

Sonoma 14.1.1 Apple Silicon M2 Pro (ARM)

Debug output

Getting this when adding --debug flag Unrecognized command or argument '--debug'.

Other information

No response

baywet commented 3 months ago

Hi @DylanBarber, Thank you for using kiota and for reaching out. This is expected as we've switched to the ES6 style of imports (which require a .js or .mjs import in the generated code) What's the module type of your application? What's the configuration in tsconfig.json?

DylanBarber commented 3 months ago

Thank you for the quick response. We are unable to use anything other than esnext for module type since Next JS requires that for dynamic imports. I have pasted the tsconfig below and also the message given to us by the Next builder when attempting to set to ES6


{
  "compilerOptions": {
    "target": "ES2015",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "./app/types/__generated__/"
  ]
}

*After running next build or next dev

   We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
   The following mandatory changes were made to your tsconfig.json:

        - module was set to esnext (for dynamic import() support)

baywet commented 3 months ago

Thank you for the additional information. I want to be transparent with the fact that most of our testing has been done on node/npm at this point. Have you tried changing the moduleResolution? What is the module type in package.json? How are you importing the client?

IkeOTL commented 1 month ago

I had the exact same issue awhile ago when upgrading from 1.15 to 1.16, so I stayed with 1.15. However, I want the updates now so I resolved it like this:

My webapp uses Next.js 14. In my webapp's root dir I have a clients dir where I have a Node.js project.

Points of interest:

This clients project downloads my swagger files from target endpoints and generates TS clients using dotnet kiota generate ... --output ./generated-clients/....

The second step is to npx tsc

the tsconfig.json for the clients dir looks like this:

{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"outDir": "./dist",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"declaration": true
},
"include": [
"generated-clients/**/*"
]
}

now in the Next.js webapp's tsconfig.json make sure you include the built clients path
```
"paths": {
...
  "@/api-clients/*": ["./clients/dist/*"]
}
```

microsoft / kiota