findDOMNode is deprecated in StrictMode

[Nick-Mazuk]

As soon as I hooked up react-axe, I got dozens of instances of this error:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of [function component] which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

Where [function component] is the display name of a function component used on the current page.

I am using Next JS and integrated react-axe as shown in https://github.com/dequelabs/react-axe/issues/125

// _app.tsx

if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
    const axe = require('react-axe')
    const ReactDOM = require('react-dom')
    axe(React, ReactDOM, 5000)
}

The errors are almost certainly coming from react-axe since the following does not produce any errors:

// _app.tsx

if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
    const axe = require('react-axe')
    const ReactDOM = require('react-dom')
    // axe(React, ReactDOM, 5000)
}

Any ideas on how to fix this? It looks like react-axe is correctly identifying accessibility errors, but those errors are drowned by seas of this error making the use of react-axe impractical right now.

[straker]

Ya, findDOMNode is deprecated, but the correct way to replace it is to use the ref attribute, which we don't have access to. So for now we use it but don't have a fix other than don't use strict mode.

[straker]

We have moved this package to be under our axe-core-npm monorepo for easier management. As a result, this repository will be deprecated in the coming weeks.

I have transferred the issue so we can still keep track of it.

[Nick-Mazuk]

Ok, thanks Straker!