Support react 19 #1448

lu-perfect · 2024-12-12T10:44:05Z

What is the problem this feature would solve?

Support react 19

External documents/projects?

No response

What is the feature you are proposing to solve the problem?

No response

What alternatives have you considered?

No response

linear · 2024-12-12T10:44:10Z

KUBB-85 Support react 19

stijnvanhulle · 2024-12-14T00:50:35Z

@lu-perfect I had a try with the latest Kubb version(3.3.0, react-query and React 19), seems to work fine here. See https://www.kubb.dev/examples/tanstack-query/react-query

Rikard-Johansson97 · 2024-12-16T11:30:01Z

@lu-perfect I had a try with the latest Kubb version(3.3.0, react-query and React 19), seems to work fine here. See https://www.kubb.dev/examples/tanstack-query/react-query

I get validation error when its running the 2/5 | plugin-oas: buildStart

ERROR Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. (repeated 2361 times)

stijnvanhulle · 2024-12-16T12:06:58Z

@Rikard-Johansson97 Could you provide me an example project or your package.json/kubb.config.ts?

geirsagberg · 2024-12-22T06:21:38Z

I am also getting an error:

Cannot read properties of undefined (reading 'ReactCurrentOwner')

    at $$$reconciler (node_modules/react-reconciler/cjs/react-reconciler.development.js:491:46)
    at node_modules/@kubb/react/src/kubbRenderer.ts:75:3
    at import (node_modules/jiti/dist/jiti.cjs:1:199710)
    at node_modules/@kubb/plugin-oas/dist/chunk-BAU7PO7T.js:1:195
    at import (node_modules/jiti/dist/jiti.cjs:1:199710)
    at node_modules/@kubb/plugin-oas/dist/chunk-WBHFV7C2.js:1:256
    at import (node_modules/jiti/dist/jiti.cjs:1:199710)
    at node_modules/@kubb/plugin-oas/dist/index.js:2:21
    at import (node_modules/jiti/dist/jiti.cjs:1:199710)
    at kubb.config.ts:2:18
    at Function.import (node_modules/jiti/dist/jiti.cjs:1:199710)
    at tsLoader (node_modules/@kubb/cli/src/utils/getCosmiConfig.ts:21:15)
    at Explorer.#loadConfiguration (node_modules/cosmiconfig/src/Explorer.ts:160:30)
    at Explorer.#loadConfigFileWithImports (node_modules/cosmiconfig/src/Explorer.ts:114:27)
    at Explorer.#readConfiguration (node_modules/cosmiconfig/src/Explorer.ts:105:7)
    at search (node_modules/cosmiconfig/src/Explorer.ts:61:28)
    at Explorer.search (node_modules/cosmiconfig/src/Explorer.ts:95:12)
    at getCosmiConfig (node_modules/@kubb/cli/src/utils/getCosmiConfig.ts:60:57)
    at Object.run (node_modules/@kubb/cli/src/commands/generate.ts:81:20)
    at runCommand (node_modules/citty/dist/index.mjs:316:16)
    at runCommand (node_modules/citty/dist/index.mjs:307:11)
    at runMain (node_modules/citty/dist/index.mjs:445:7)
    at run (node_modules/@kubb/cli/src/index.ts:49:3)

Relates to this line in react-reconciler:

var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

This has been renamed in React 19. Can be fixed like this: https://github.com/microsoft/use-disposable/pull/32/files#diff-5971f63da29997ff64996c0f14497c4756ed24cf15d181141ea6a8f9c8d7a376R6, in react-reconciler

geirsagberg · 2024-12-22T06:23:08Z

Seems to have been fixed in latest version of react-reconciler. So @kubb/react should probably update their version

obrassard · 2024-12-31T15:56:02Z

It does not seems to be exclusively realted to the TanstackQuery plugin, because I have the same issue even if I remove pluginTanstackQuery()

Rikard-Johansson97 · 2025-01-16T06:48:34Z

@stijnvanhulle

Environment:
I’m using the Kubb generator in React 19 (Next.js 15) within a large monorepo. My current setup includes:

"@kubb/cli": "3.5.1",
"@kubb/core": "3.5.1",
"@kubb/oas": "3.5.1",
"@kubb/plugin-client": "3.5.1",
"@kubb/plugin-oas": "3.5.1",
"@kubb/plugin-react-query": "3.5.1",
"@kubb/plugin-ts": "3.5.1",
"@kubb/plugin-zod": "3.5.1",
"@kubb/react": "3.5.1",

Configuration:
Here’s my configuration file:

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

export default defineConfig({
  input: {
    path: `${process.env.NEXT_PUBLIC_API_URL}/swagger/v1/swagger.json`,
  },
  root: ".",
  name: "@ssil/generated",
  output: {
    path: "./src",
    write: true,
    clean: true,
    extension: undefined,
    barrelType: "named",
  },
  hooks: {
    done: ["pnpm turbo run format --force --continue -- --write"],
  },
  plugins: [
    pluginOas({ validate: true }),
    pluginTs({
      unknownType: "unknown",
      enumSuffix: "",
      transformers: {
        name: (name) => `${name}Type`,
      },
    }),
    pluginClient({
      importPath: "@ssil/client/socio",
      pathParamsType: "object",
    }),
    pluginReactQuery({
      client: {
        dataReturnType: "data",
        importPath: "@ssil/client/socio",
      },
      suspense: {},
    }),
    pluginZod({
      unknownType: "unknown",
      coercion: true,
      typed: true,
    }),
  ],
});

Problem:
When running the generator, I encounter the following error:

[@ssil/generated 07:41:39] ERROR Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM).
2. You might be breaking the Rules of Hooks.
3. You might have more than one copy of React in the same app.

See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Temporary Fix:
I can resolve the issue by overriding the React version in the root package.json:

"pnpm": {
  "overrides": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

stijnvanhulle · 2025-01-16T10:18:50Z

@Rikard-Johansson97 I tried with your settings here but without any issues, see https://github.com/kubb-labs/test-next-15. Could you point me to what is different between my test and your project?

Rikard-Johansson97 · 2025-01-16T18:28:27Z

@Rikard-Johansson97 I tried with your settings here but without any issues, see https://github.com/kubb-labs/test-next-15. Could you point me to what is different between my test and your project?

It's only see a plain next-15 project. Have you uncommitted changes?

stijnvanhulle · 2025-01-16T20:10:02Z

@Rikard-Johansson97 yes indeed, forgot to push latest changes

obrassard · 2025-01-28T21:21:44Z

Any update on this issue ? We still haven't found a way to make Kubb work in a React 19 project

stijnvanhulle · 2025-01-28T21:40:38Z

@obrassard Can you provide me some information about your setup or a playground for it? I have next 15 with React 19 test done that worked fine + React 19 with vite was also working fine. So trying to see what kind of difference there is with other projects.

obrassard · 2025-01-28T22:28:16Z

Hi @stijnvanhulle, thank you for you fast answer. I've made more tests and I realized that the behaviour was different whether we use bun or npm for package installation. I've always only tested with bun because I didn't know the package manager would have an impact on this.

When using bun

git clone https://github.com/obrassard/kubb-debug
cd kubb-debug
bun install
bunx kubb

I have the following error that I had not in react 18 projects :

When using npm

git clone https://github.com/obrassard/kubb-debug
cd kubb-debug
# or `rm -rf node_modules` in the bun project
npm install
npx kubb

I have a different error, that doesn't seem to be related to React

All @kubb packages are at the latest version :

"@kubb/cli": "^3.5.6",
"@kubb/core": "^3.5.6",
"@kubb/plugin-oas": "^3.5.6",
"@kubb/swagger-tanstack-query": "^2.28.4",
"@kubb/swagger-ts": "^2.28.4",
"@kubb/swagger-zod": "^2.28.4",

stijnvanhulle · 2025-01-28T22:31:18Z

@obrassard Not sure if this is related to Bun but I already see that you are using Kubb v2 and Kubb v3 together which is something that will result in random errors. Can you try updating all packages that uses @kubb/swagger-xxxxx with @kubb/plugin-xxxx. See https://www.kubb.dev/migration-guide#plugin-renames

obrassard · 2025-01-28T22:52:37Z

@stijnvanhulle Oh my, I don't know how I missed this!

I modified my dependencies and adapted the configuration. Now when installing with NPM everything works as expected. However, if I install the packages with Bun I get the same error message (Cannot read properties of undefined (reading 'ReactCurrentOwner'))

andrody · 2025-01-31T19:03:32Z

Same problem using bun: Cannot read properties of undefined (reading 'ReactCurrentOwner')

obrassard · 2025-02-04T15:53:37Z

@stijnvanhulle Any update on the Bun issue? Is there something I can do to help further diagnose this issue?

stijnvanhulle · 2025-02-04T20:08:23Z

@obrassard Do you have a playground/Codesandbox? I tried locally myself with Bun and no issues found so need to see if something else is making Kubb crash.

obrassard · 2025-02-04T20:15:21Z

@stijnvanhulle Had you tried with this repo ? Everytime I try running those command I can reproduce the error easily :

git clone https://github.com/obrassard/kubb-debug
cd kubb-debug
bun install
bunx kubb

For the record I have the latest version of bun installed locally 1.2.2

If you cannot reproduce it on your side with this repo, let me know and I'll try to reproduce it in an online playground, however the one I know doesn't support bun out of the box

stijnvanhulle · 2025-02-04T22:07:35Z

@obrassard I have a solution that will be fixed in version v.3.5.7, this will make the overall npm package 4MB larger.

Issue: Bun does not respect the same node_modules structure as other package managers. They try to be smarter with caching which results in Kubb using the main React version instead of the custom one we specify in @kubb/react. The only solution right now is to include all custom react tools as part of our library.

obrassard · 2025-02-06T03:00:14Z

Thank you @stijnvanhulle !

Rikard-Johansson97 · 2025-02-11T18:29:43Z

@stijnvanhulle I can confirm that v3.5.10 works with my Turborepo (pnpm workspace), Next.js (v15.1.7), and React (v19). Thanks! 😊

lu-perfect added the enhancement New feature or request label Dec 12, 2024

stijnvanhulle added the @kubb/react label Dec 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support react 19 #1448

Support react 19 #1448

lu-perfect commented Dec 12, 2024 •

edited by stijnvanhulle

Loading

linear bot commented Dec 12, 2024

stijnvanhulle commented Dec 14, 2024

Rikard-Johansson97 commented Dec 16, 2024

stijnvanhulle commented Dec 16, 2024

geirsagberg commented Dec 22, 2024

geirsagberg commented Dec 22, 2024

obrassard commented Dec 31, 2024 •

edited

Loading

Rikard-Johansson97 commented Jan 16, 2025 •

edited

Loading

stijnvanhulle commented Jan 16, 2025

Rikard-Johansson97 commented Jan 16, 2025

stijnvanhulle commented Jan 16, 2025

obrassard commented Jan 28, 2025

stijnvanhulle commented Jan 28, 2025

obrassard commented Jan 28, 2025

stijnvanhulle commented Jan 28, 2025

obrassard commented Jan 28, 2025

andrody commented Jan 31, 2025

obrassard commented Feb 4, 2025

stijnvanhulle commented Feb 4, 2025

obrassard commented Feb 4, 2025

stijnvanhulle commented Feb 4, 2025

obrassard commented Feb 6, 2025

Rikard-Johansson97 commented Feb 11, 2025

Support react 19 #1448

Support react 19 #1448

Comments

lu-perfect commented Dec 12, 2024 • edited by stijnvanhulle Loading

What is the problem this feature would solve?

External documents/projects?

What is the feature you are proposing to solve the problem?

What alternatives have you considered?

linear bot commented Dec 12, 2024

stijnvanhulle commented Dec 14, 2024

Rikard-Johansson97 commented Dec 16, 2024

stijnvanhulle commented Dec 16, 2024

geirsagberg commented Dec 22, 2024

geirsagberg commented Dec 22, 2024

obrassard commented Dec 31, 2024 • edited Loading

Rikard-Johansson97 commented Jan 16, 2025 • edited Loading

stijnvanhulle commented Jan 16, 2025

Rikard-Johansson97 commented Jan 16, 2025

stijnvanhulle commented Jan 16, 2025

obrassard commented Jan 28, 2025

stijnvanhulle commented Jan 28, 2025

obrassard commented Jan 28, 2025

When using bun

When using npm

stijnvanhulle commented Jan 28, 2025

obrassard commented Jan 28, 2025

andrody commented Jan 31, 2025

obrassard commented Feb 4, 2025

stijnvanhulle commented Feb 4, 2025

obrassard commented Feb 4, 2025

stijnvanhulle commented Feb 4, 2025

obrassard commented Feb 6, 2025

Rikard-Johansson97 commented Feb 11, 2025

lu-perfect commented Dec 12, 2024 •

edited by stijnvanhulle

Loading

obrassard commented Dec 31, 2024 •

edited

Loading

Rikard-Johansson97 commented Jan 16, 2025 •

edited

Loading