React: warning after upgrade to the latest version: component appears to be a function component that returns a class instance.

[Jin827]

After I updated React to the latest version (@16.9.0), I am getting warnings below from most of the components. I am using material-ui, formik and tables.

• I've updated React in order to move from react-testing-library to testing-library/react.

The component appears to be a function component that returns a class instance. Change InputLabel to a class that extends React.Component instead. If you can't use a class try assigning the prototype on the function as a workaround.InputLabel.prototype = React.Component.prototype. Don't use an arrow function since it cannot be called withnewby React.

I would like to keep my code with functional components using react hook as much as possible.
Is there any other work around or should I just downgrade react ?

"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"@material-ui/core": "^3.1.2",
"formik": "^1.5.8",

[lwhiteley]

i had this issue, and when i upgraded webpack, webpack-dev-server and react-hot-loader (to their latest respective versions), the warnings were gone

my assumption is that react-hot-loader was my issue. didn't really test to confirm

It also occurred to me that react wasn't the fault because i was getting this warning for a functional component that had a simple text return (no nested components), hence the notion to upgrade dev packages

Let me know if that helps

[gaearon]

You don’t need to downgrade anything.

The warning is explained here: https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

The warning says it’s about InputLabel component. Can you find its source code? Maybe it uses this deprecated pattern and can be updated. Such as inside Material UI. In that case you might need to file an issue with them. If you didn’t write this InputLabel component, there’s no further action needed from you.

Note that it’s possible some tools (like react-hot-loader) are interfering. The transformation it does is too invasive. If you can nail it down to that project please report the problem to them.

[Jin827]

The issue was resolved with @material-ui/core upgrade to version 4.3.2 !! Thanks :)

[ChuckJonas]

@gaearon I don't see anything in the link you posted explaining this. I've search in a couple places and finding it very hard to find an answer. (I'm guessing my issue probably is react-hot-loader, but still, it should be easier to track down documentation).

[nannongrousong]

@gaearon I don't see anything in the link you posted explaining this. I've search in a couple places and finding it very hard to find an answer. (I'm guessing my issue probably is react-hot-loader, but still, it should be easier to track down documentation).

agree.

[ChuckJonas]

Upgrading for [email protected] to latest resolved the issue for me. However, again it would be good to have documentation on what the issue is so you can at least validate that your components are not the issue (and it's likely coming from a HOC).

[PawelGIX]

Could this message be more precise? I can no longer render Class component in Functional component?
Message:

Warning: The component appears to be a function component that returns a class instance. Change LoaderFixed to a class that extends React.Component instead. If you can't use a class try assigning the prototype on the function as a workaround. LoaderFixed.prototype = React.Component.prototype. Don't use an arrow function since it cannot be called with new by React.
in LoaderFixed (created by loading)

LoaderFixed.jsx:

import React from 'react'

import Loader from './Loader';

export default function LoaderFixed(props){
    return <Loader isVisible={true} isFixed={true} />
}

Is this already incorrect code?

Update:
ProxyComponent caused warnings. After updating react-hot-loader the problem disappeared.
"react-hot-loader": "4.3.11" -> "4.12.18",

[kimskovhusandersen]

For anyone using Relay...
Changing from
import graphql from 'babel-plugin-relay/macro';
to
import { graphql } from 'react-relay';
and upgrading the packages solved the problem for me.