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

[BUG] - Component created from extendVariants cannot be used as a JSX component #4269

Closed
shlyamster opened this issue Dec 7, 2024 · 10 comments · Fixed by #4291
Closed

[BUG] - Component created from extendVariants cannot be used as a JSX component #4269

shlyamster opened this issue Dec 7, 2024 · 10 comments · Fixed by #4291

Comments

@shlyamster
Copy link
Contributor

shlyamster commented Dec 7, 2024

NextUI Version

2.6.4

Describe the bug

As I understand it, due to the change in the ReactElement interface in React 19, an error occurs in determining the type of component when creating your own styles through the extendVariants function.

When using @types/react version 18.3.12

interface ReactElement<P = any, T extends ...> 

When using @types/react version 19.0.1

interface ReactElement<P = unknown, T extends ...> 

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Using these library versions, try to create any component with custom styles through the extendVariants function. An error occurs - 'Component' cannot be used as a JSX component.

{
  "name": "project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start --hostname 0.0.0.0",
    "lint": "next lint"
  },
  "browserslist": [
    "defaults"
  ],
  "dependencies": {
    "@nextui-org/react": "^2.6.4",
    "@nextui-org/use-infinite-scroll": "^2.2.1",
    "clsx": "^2.1.1",
    "framer-motion": "^11.13.1",
    "next": "^15.0.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/node": "^22.10.1",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    "autoprefixer": "^10.4.20",
    "cssnano": "^7.0.6",
    "cssnano-preset-advanced": "^7.0.6",
    "eslint": "^9.16.0",
    "eslint-config-next": "^15.0.4",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.16",
    "typescript": "^5.7.2"
  }
}

Expected behavior

I think this is an error in the extendVariants function type declaration and need to specify ReactElement<any> there.

Screenshots or Videos

No response

Operating System Version

Any

Browser

Chrome

@shlyamster
Copy link
Contributor Author

shlyamster commented Dec 9, 2024

@wingkwong I studied the source code of the extendVariants function in a little more detail. It looks strange to me that in the type declaration, the function returns ForwardRefRenderFunction type, although in fact in extend-variants.js the ForwardedComponent is returned, which is obtained as a result of the forwardRef call, and the returned type must be ForwardRefExoticComponent.

If I understand everything correctly, the actual declaration of the ExtendVariants type should be as follows.

type ExtendVariants = {
  <
    C extends JSXElementConstructor<any>,
    CP extends ComponentProps<C>,
    S extends ComponentSlots<CP>,
    V extends ComposeVariants<CP, S>,
    SV extends SuggestedVariants<CP, S>,
    DV extends DefaultVariants<V, SV>,
    CV extends CompoundVariants<V, SV>,
  >(
    BaseComponent: C,
    styles: {
      variants?: V;
      defaultVariants?: DV;
      compoundVariants?: CV;
      slots?: S;
    },
    opts?: Options,
  ): ForwardRefExoticComponent<
    PropsWithoutRef<{
      [key in keyof CP | keyof V]?:
        | (key extends keyof CP ? CP[key] : never)
        | (key extends keyof V ? StringToBoolean<keyof V[key]> : never);
    }> &
      RefAttributes<ReactElement>
  >;
};

@wingkwong
Copy link
Member

can you provide a simple sandbox for reproducing the issue and a PR for us to review?

@shlyamster
Copy link
Contributor Author

@wingkwong I will try to do it soon

@shlyamster
Copy link
Contributor Author

@wingkwong Check the reproduction of the error in my codesandbox. In the app/page.tsx file you can see the ts error I'm talking about. And in utils/extendVariants.ts, a correction of the data type is presented.

I also made a pull request #4291 with data type corrections.

@AndreyMay
Copy link

+1, having the same issue

@Andro172
Copy link

+1, also does anyone know when will this be released?

@blackmouse572
Copy link

+1, wait for further notification

@carlosriveroib
Copy link
Contributor

also waiting for this release

@vmehdi
Copy link

vmehdi commented Dec 20, 2024

+1, having the same issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants