Property 'displayName' does not exist on type '...'

[hoandt]

It seems that the displayName property is not directly assignable to the component in this case:

const Table = React.forwardRef< HTMLTableElement, React.HTMLAttributes<HTMLTableElement>

(({ className, ...props }, ref) => (

)) Table. displayName = "Table"

Property 'displayName' does not exist on type '(props: HTMLAttributes<HTMLTableElement> & RefAttributes<HTMLTableElement>) => ReactElement<any, string | JSXElementConstructor<...>> | null'.ts(2339)

Please guide me...

[hoandt]

I think it conflicts with ESLint or something. But I'm not sure how to fix it.

[hoandt]

I don't know, but I use this, it's fixed:

export const A = forwardRef(function A(props, ref) { return <>....</> });

[brooksa-chemtest]

This issue has just popped up for me on all of my components.

I have no idea what I might have done to cause this.

Has anyone else encountered this and know how to fix?

[brandnholl]

This issue also just popped up for me

[brandnholl]

Fixed by adding semi-colons to the end of each display name declaration. MyComponent.displayName = 'MyComponent';

[hoandt]

No ideas. I leave them there.

Fixed by adding semi-colons to the end of each display name declaration. MyComponent.displayName = 'MyComponent';

Nice, but not working for me :(

[hoandt]

NO, I was stupid. I redeclared the forwardRef in global.d.types. Remove it and things will work again.... Man.. I'm crying

import * as React from "react";

declare module "react" { function forwardRef<T, P = {}>( render: (props: P, ref: React.Ref<T>) => React.ReactElement | null ): (props: P & React.RefAttributes<T>) => React.ReactElement | null; }

[hoandt]

Closed.

[liuhe2020]

I had this issue, then I updated all my packages and the errors were gone, super strange.

[usmanashrf]

NO, I was stupid. I redeclared the forwardRef in global.d.types. Remove it and things will work again.... Man.. I'm crying

import * as React from "react";

declare module "react" { function forwardRef<T, P = {}>( render: (props: P, ref: React.Ref) => React.ReactElement | null ): (props: P & React.RefAttributes) => React.ReactElement | null; }

@hoandt Didn't get it can you explain how you solve it? I'm facing the same issue related "displayName" and I'm not able to deploy it on Vercel

[hoandt]

Can you try to find this in your entire project?

declare module "react" {

or

function forwardRef

[johnLamberts]

NO, I was stupid. I redeclared the forwardRef in global.d.types. Remove it and things will work again.... Man.. I'm crying

import * as React from "react";

declare module "react" { function forwardRef<T, P = {}>( render: (props: P, ref: React.Ref) => React.ReactElement | null ): (props: P & React.RefAttributes) => React.ReactElement | null; }

This is not working though, I already declare a module for this to override the forwardRef, but it was still getting me type error.

Property 'displayName' does not exist on type '(props: any) => ReactElement<any, string | JSXElementConstructor<any>>'

this is the error I got after declaring,

Hey, I found my own solution. Thanks!

declare module "react" { function forwardRef<T, P = {}>( render: (props: P, ref: React.Ref) => React.ReactElement | null ): (props: P & React.RefAttributes) => React.ReactElement | null; }

---

declare module "react" { function forwardRef<T, P = {}> ( render: (props: P, ref: React.Ref) => React.FunctionComponent | null ): (props: P & React.RefAttributes) => React.ReactElement | null; }

I don't know if this is the correct answer, but it works with me.

[kikienelsone]

I fixed it with "const App: React.FC"