Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"The inferred type... cannot be named without a reference to {npm package}. This is likely not portable. A type annotation is necessary." #1396

Closed
komali2 opened this issue Nov 14, 2024 · 6 comments
Labels
bug Something isn't working external typescript

Comments

@komali2
Copy link

komali2 commented Nov 14, 2024

What version of kubb is running?

3.05

What platform is your computer?

linux

What version of external packages are you using(@tanstack-query, MSW, React, Vue, ...)

tanstack query: 5.51.23, react: 18,

What steps can reproduce the bug?

Integrate this into an openapi.json file:

    "/steps/{step_id}": {
      "delete": {
        "tags": [
          "Steps"
        ],
        "summary": "Flag a step as deleted",
        "operationId": "delete_step",
        "security": [
          {
            "OAuth2PasswordBearer": []
          }
        ],
        "parameters": [
          {
            "name": "step_id",
            "in": "path",
            "required": true,
            "schema": {
              "type": "integer",
              "exclusiveMinimum": 0,
              "title": "Step Id"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Step"
                }
              }
            }
          },
          "400": {
            "description": "Bad Request",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "401": {
            "description": "Unauthorized",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "403": {
            "description": "Forbidden",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "404": {
            "description": "Not Found",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          }
        }
      },
      "get": {
        "tags": [
          "Steps"
        ],
        "summary": "Get a step",
        "operationId": "get_step",
        "security": [
          {
            "OAuth2PasswordBearer": []
          }
        ],
        "parameters": [
          {
            "name": "step_id",
            "in": "path",
            "required": true,
            "schema": {
              "type": "integer",
              "exclusiveMinimum": 0,
              "title": "Step Id"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Step"
                }
              }
            }
          },
          "400": {
            "description": "Bad Request",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "401": {
            "description": "Unauthorized",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "403": {
            "description": "Forbidden",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "404": {
            "description": "Not Found",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          }
        }
      },
      "patch": {
        "tags": [
          "Steps"
        ],
        "summary": "Update a step",
        "operationId": "update_step",
        "security": [
          {
            "OAuth2PasswordBearer": []
          }
        ],
        "parameters": [
          {
            "name": "step_id",
            "in": "path",
            "required": true,
            "schema": {
              "type": "integer",
              "exclusiveMinimum": 0,
              "title": "Step Id"
            }
          }
        ],
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/UpdateStep"
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Step"
                }
              }
            }
          },
          "422": {
            "description": "Unprocessable Entity",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "code": {
                      "type": "string"
                    },
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "400": {
            "description": "Bad Request",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "401": {
            "description": "Unauthorized",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "403": {
            "description": "Forbidden",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "404": {
            "description": "Not Found",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "409": {
            "description": "Conflict",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "code": {
                      "type": "string"
                    },
                    "field": {
                      "type": "string"
                    },
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

Follow a config similar to this:

import { defineConfig } from "@kubb/core";
import { pluginTs } from "@kubb/plugin-ts";
import { pluginZod } from "@kubb/plugin-zod";
import { pluginReactQuery } from "@kubb/plugin-react-query";
import { pluginOas } from "@kubb/plugin-oas";

export default defineConfig({
  root: ".",
  input: {
    path: "./apps/backend/openapi.json",
  },
  output: {
    path: "./apps/webapp/src/gen",
    clean: true,
  },
  hooks: {
    done: ["npm run lintfix", "npm run format"],
  },
  plugins: [
    pluginOas(),
    pluginTs({
      output: {
        path: "models",
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Controller`,
      },
      enumType: "literal",
    }),
    pluginZod({
      output: {
        path: "./zod",
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Schemas`,
      },
      typed: true,
      dateType: "stringOffset",
      unknownType: "unknown",
      importPath: "zod",
    }),
    pluginReactQuery({
      output: {
        path: "./hooks",
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Hooks`,
      },
      client: {
        dataReturnType: "full",
      },
      mutation: {
        methods: ["post", "put", "delete"],
      },
      infinite: {
        queryParam: "page",
        initialPageParam: 0,
        cursorParam: undefined,
      },
      query: {
        methods: ["get"],
        importPath: "@tanstack/react-query",
      },
      parser: "zod",
      pathParamsType: "object",
    }),
  ],
});

Generate.

Open /src/gen/hooks/stepsHooks/useGetStep.ts.

Observe the following typescript errors:

 useGetStep.ts    42  17 error    2742   The inferred type of 'getStepQueryOptions' cannot be named without a reference to '../../../../../../node_modules/@tanstack/query-core/build/modern/hydration-zFr_7WN8.js'. This is likely not portable. A type annotation is necessary. (lsp)
 useGetStep.ts    42  17 error    2742   The inferred type of 'getStepQueryOptions' cannot be named without a reference to '../../../../../../node_modules/@tanstack/react-query/build/modern/types.js'. This is likely not portable. A type annotation is necessary. (lsp)

on this function:

export function getStepQueryOptions(
  { step_id }: GetStepPathParams,
  config: Partial<RequestConfig> = {}
) {
  const queryKey = getStepQueryKey({ step_id });
  return queryOptions({
    enabled: !!step_id,
    queryKey,
    queryFn: async ({ signal }) => {
      config.signal = signal;
      return getStep({ step_id }, config);
    },
  });
}

Can be temporarily resolved by adding:

import type _1 from "@tanstack/query-core";
import type _2 from "@tanstack/react-query";

How often does this bug happen?

Every time

What is the expected behavior?

No typescript errors :P

Swagger/OpenAPI file?

linked above

Additional information

No response

@komali2 komali2 added the bug Something isn't working label Nov 14, 2024
@stijnvanhulle
Copy link
Collaborator

@komali2 Can you create an example with codeSandbox? First thought is that you are having a tsconfig issue(not related to Kubb).

@komali2
Copy link
Author

komali2 commented Nov 15, 2024

@komali2 Can you create an example with codeSandbox? First thought is that you are having a tsconfig issue(not related to Kubb).

Happy to, but it'll take me a bit since it's all nestled within a huge proprietary codebase for now. I'll work on that tomorrow (it's my night right now). For now, here's my tsconfig, just in case:

{
  "extends": "@repo/typescript-config/nextjs.json",
  "compilerOptions": {
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@/public/*": ["./public/*"],
      "@/lib/*": ["./src/lib/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.jsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

@komali2
Copy link
Author

komali2 commented Nov 26, 2024

Here's a full openapijson that reproduces the error:

{
  "openapi": "3.1.0",
  "info": {
    "title": "Example API",
    "version": "0.1.1"
  },
  "paths": {
    "/steps": {
      "post": {
        "tags": [
          "Steps"
        ],
        "summary": "Create a step",
        "operationId": "create_step",
        "security": [
          {
            "OAuth2PasswordBearer": []
          }
        ],
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/CreateStep"
              }
            }
          }
        },
        "responses": {
          "201": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Step"
                }
              }
            }
          },
          "422": {
            "description": "Unprocessable Entity",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "400": {
            "description": "Bad Request",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "401": {
            "description": "Unauthorized",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "403": {
            "description": "Forbidden",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "409": {
            "description": "Conflict",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      },
      "get": {
        "tags": [
          "Steps"
        ],
        "summary": "Find steps",
        "operationId": "find_steps",
        "security": [
          {
            "OAuth2PasswordBearer": []
          }
        ],
        "parameters": [
          {
            "name": "page",
            "in": "query",
            "required": false,
            "schema": {
              "type": "integer",
              "exclusiveMinimum": 0,
              "default": 1,
              "title": "Page"
            }
          },
          {
            "name": "limit",
            "in": "query",
            "required": false,
            "schema": {
              "type": "integer",
              "exclusiveMinimum": 0,
              "default": 50,
              "title": "Limit"
            }
          },
          {
            "name": "sort",
            "in": "query",
            "required": false,
            "schema": {
              "anyOf": [
                {
                  "enum": [
                    "created_at",
                    "id",
                    "name",
                    "updated_at"
                  ],
                  "type": "string"
                },
                {
                  "type": "null"
                }
              ],
              "title": "Sort"
            }
          },
          {
            "name": "desc",
            "in": "query",
            "required": false,
            "schema": {
              "type": "boolean",
              "default": false,
              "title": "Desc"
            }
          },
          {
            "name": "name",
            "in": "query",
            "required": false,
            "schema": {
              "anyOf": [
                {
                  "type": "string"
                },
                {
                  "type": "null"
                }
              ],
              "title": "Name"
            }
          },
          {
            "name": "project_id",
            "in": "query",
            "required": false,
            "schema": {
              "anyOf": [
                {
                  "type": "integer",
                  "exclusiveMinimum": 0
                },
                {
                  "type": "null"
                }
              ],
              "title": "Project Id"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Page_Step_"
                }
              }
            }
          },
          "400": {
            "description": "Bad Request",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "401": {
            "description": "Unauthorized",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "403": {
            "description": "Forbidden",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "404": {
            "description": "Not Found",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    "/steps/{step_id}": {
      "get": {
        "tags": [
          "Steps"
        ],
        "summary": "Get a step",
        "operationId": "get_step",
        "security": [
          {
            "OAuth2PasswordBearer": []
          }
        ],
        "parameters": [
          {
            "name": "step_id",
            "in": "path",
            "required": true,
            "schema": {
              "type": "integer",
              "exclusiveMinimum": 0,
              "title": "Step Id"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Step"
                }
              }
            }
          },
          "400": {
            "description": "Bad Request",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "401": {
            "description": "Unauthorized",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "403": {
            "description": "Forbidden",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "404": {
            "description": "Not Found",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          }
        }
      },
      "patch": {
        "tags": [
          "Steps"
        ],
        "summary": "Update a step",
        "operationId": "update_step",
        "security": [
          {
            "OAuth2PasswordBearer": []
          }
        ],
        "parameters": [
          {
            "name": "step_id",
            "in": "path",
            "required": true,
            "schema": {
              "type": "integer",
              "exclusiveMinimum": 0,
              "title": "Step Id"
            }
          }
        ],
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/UpdateStep"
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "Successful Response",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/Step"
                }
              }
            }
          },
          "422": {
            "description": "Unprocessable Entity",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "400": {
            "description": "Bad Request",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "401": {
            "description": "Unauthorized",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "403": {
            "description": "Forbidden",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          },
          "404": {
            "description": "Not Found",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "message": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "409": {
            "description": "Conflict",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "errors": {
                      "type": "array",
                      "items": {
                        "type": "object",
                        "properties": {
                          "code": {
                            "type": "string"
                          },
                          "field": {
                            "type": "array",
                            "items": {
                              "type": "string"
                            }
                          },
                          "message": {
                            "type": "string"
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
  },
  "components": {
    "schemas": {
      "CreateStep": {
        "properties": {
          "description": {
            "type": "string",
            "maxLength": 1000,
            "minLength": 1,
            "title": "Description"
          },
          "name": {
            "type": "string",
            "maxLength": 80,
            "minLength": 1,
            "title": "Name"
          },
          "project_id": {
            "type": "integer",
            "exclusiveMinimum": 0.0,
            "title": "Project Id"
          }
        },
        "type": "object",
        "required": [
          "description",
          "name",
          "project_id"
        ],
        "title": "CreateStep"
      },
      "HTTPValidationError": {
        "properties": {
          "detail": {
            "items": {
              "$ref": "#/components/schemas/ValidationError"
            },
            "type": "array",
            "title": "Detail"
          }
        },
        "type": "object",
        "title": "HTTPValidationError"
      },
      "Page_Step_": {
        "properties": {
          "data": {
            "items": {
              "$ref": "#/components/schemas/Step"
            },
            "type": "array",
            "title": "Data"
          },
          "limit": {
            "type": "integer",
            "exclusiveMinimum": 0.0,
            "title": "Limit"
          },
          "more": {
            "type": "boolean",
            "title": "More"
          },
          "page": {
            "type": "integer",
            "exclusiveMinimum": 0.0,
            "title": "Page"
          }
        },
        "type": "object",
        "required": [
          "data",
          "limit",
          "more",
          "page"
        ],
        "title": "Page[Step]"
      },
      "Step": {
        "properties": {
          "created_at": {
            "type": "string",
            "title": "Created At"
          },
          "deleted_at": {
            "anyOf": [
              {
                "type": "string"
              },
              {
                "type": "null"
              }
            ],
            "title": "Deleted At"
          },
          "id": {
            "type": "integer",
            "exclusiveMinimum": 0.0,
            "title": "Id"
          },
          "updated_at": {
            "type": "string",
            "title": "Updated At"
          },
          "description": {
            "type": "string",
            "maxLength": 1000,
            "minLength": 1,
            "title": "Description"
          },
          "name": {
            "type": "string",
            "maxLength": 80,
            "minLength": 1,
            "title": "Name"
          },
          "project_id": {
            "type": "integer",
            "exclusiveMinimum": 0.0,
            "title": "Project Id"
          }
        },
        "type": "object",
        "required": [
          "created_at",
          "deleted_at",
          "id",
          "updated_at",
          "description",
          "name",
          "project_id"
        ],
        "title": "Step"
      },
      "UpdateStep": {
        "properties": {
          "description": {
            "anyOf": [
              {
                "type": "string",
                "maxLength": 1000,
                "minLength": 1
              },
              {
                "type": "null"
              }
            ],
            "title": "Description"
          },
          "name": {
            "anyOf": [
              {
                "type": "string",
                "maxLength": 80,
                "minLength": 1
              },
              {
                "type": "null"
              }
            ],
            "title": "Name"
          }
        },
        "type": "object",
        "title": "UpdateStep"
      },
      "ValidationError": {
        "properties": {
          "loc": {
            "items": {
              "anyOf": [
                {
                  "type": "string"
                },
                {
                  "type": "integer"
                }
              ]
            },
            "type": "array",
            "title": "Location"
          },
          "msg": {
            "type": "string",
            "title": "Message"
          },
          "type": {
            "type": "string",
            "title": "Error Type"
          }
        },
        "type": "object",
        "required": [
          "loc",
          "msg",
          "type"
        ],
        "title": "ValidationError"
      }
    },
  }
}

With this tsconfig.json:

{
    "$schema": "https://json.schemastore.org/tsconfig",
    "compilerOptions": {
        "allowJs": true,
        "allowImportingTsExtensions": true,
        "allowSyntheticDefaultImports": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "checkJs": true,
        "declaration": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "jsx": "react",
        "isolatedModules": true,
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ES2022"
        ],
        "module": "ES2022",
        "moduleResolution": "Bundler",
        "noEmit": true,
        "noImplicitReturns": true,
        "noUncheckedIndexedAccess": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "experimentalDecorators": true,
        "strict": true,
        "target": "ES2020",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        }
    },
    "files": [
        "src/main.tsx"
    ],
    "include": [
        "eslint.config.js",
        "prettier.config.js",
        "src"
    ]
}

And this kubb config:

import { defineConfig } from "@kubb/core";
import { pluginTs } from "@kubb/plugin-ts";
import { pluginZod } from "@kubb/plugin-zod";
import { pluginReactQuery } from "@kubb/plugin-react-query";
import { pluginOas } from "@kubb/plugin-oas";
// import { pluginClient } from "@kubb/plugin-client";

export default defineConfig({
  root: ".",
  input: {
    path: "../backend/openapi.json",
  },
  output: {
    path: "./src/gen",
    clean: true,
  },
  hooks: {
    done: ["npm run lintfix", "npm run format"],
  },
  plugins: [
    pluginOas(),
    pluginTs({
      output: {
        path: "models",
        barrelType: false,
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Controller`,
      },
      enumType: "literal",
    }),
    // pluginClient({
    //   output: {
    //     path: ".",
    //     barrelType: false,
    //   },
    //   importPath: "@/kubb-client.ts",
    // }),
    pluginZod({
      output: {
        path: "./zod",
        barrelType: false,
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Schemas`,
      },
      typed: true,
      dateType: "stringOffset",
      unknownType: "unknown",
      importPath: "zod",
    }),
    pluginReactQuery({
      output: {
        path: "./hooks",
        barrelType: false,
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Hooks`,
      },
      client: {
        dataReturnType: "data",
        importPath: "@/kubb-client",
      },
      mutation: {
        methods: ["post", "put", "delete"],
      },
      infinite: {
        queryParam: "page",
        initialPageParam: 0,
        cursorParam: undefined,
      },
      query: {
        methods: ["get"],
        importPath: "@tanstack/react-query",
      },
      parser: "zod",
      pathParamsType: "object",
      suspense: false,
    }),
  ],
});

@komali2
Copy link
Author

komali2 commented Nov 26, 2024

Adding this to the top of every file "fixes" the issue:

import * as _hydration from "@tanstack/query-core";
import * as _build from "@tanstack/react-query";

It can be added with the output.banner function. See kubb config:

import { defineConfig } from "@kubb/core";
import { pluginTs } from "@kubb/plugin-ts";
import { pluginZod } from "@kubb/plugin-zod";
import { pluginReactQuery } from "@kubb/plugin-react-query";
import { pluginOas } from "@kubb/plugin-oas";

export default defineConfig({
  root: ".",
  input: {
    path: "../backend/openapi.json",
  },
  output: {
    path: "./src/gen",
    clean: true,
  },
  // hooks: {
  //   done: ["npm run lintfix", "npm run format"],
  // },
  plugins: [
    pluginOas(),
    pluginTs({
      output: {
        path: "models",
        barrelType: false,
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Controller`,
      },
      enumType: "literal",
    }),
    pluginZod({
      output: {
        path: "./zod",
        barrelType: false,
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Schemas`,
      },
      typed: true,
      dateType: "stringOffset",
      unknownType: "unknown",
      importPath: "zod",
    }),
    pluginReactQuery({
      output: {
        path: "./hooks",
        barrelType: false,
        banner: `
import * as _hydration from "@tanstack/query-core";
import * as _build from "@tanstack/react-query";
`,
      },
      group: {
        type: "tag",
        name: ({ group }) => `${group}Hooks`,
      },
      mutation: {
        methods: ["post", "put", "delete"],
      },
      infinite: {
        queryParam: "page",
        initialPageParam: 0,
        cursorParam: undefined,
      },
      query: {
        methods: ["get"],
        importPath: "@tanstack/react-query",
      },
      parser: "zod",
      pathParamsType: "object",
      suspense: false,
    }),
  ],
});

@stijnvanhulle
Copy link
Collaborator

@komali2 I tried reproducing the issue but couldn’t replicate the error. I tested a few scenarios to check if it might be related to your tsconfig, but without success. It seems more likely to be a configuration issue unrelated to Kubb’s generation. I recommend opening an issue directly with React Query (https://github.com/TanStack/query) for further assistance.

@stijnvanhulle stijnvanhulle closed this as not planned Won't fix, can't repro, duplicate, stale Nov 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working external typescript
Projects
None yet
Development

No branches or pull requests

2 participants