react: Support React v18

[stephenmathieson]

Product: react
Expectation: React v18 support and docs
Actual: n/a
Motivation: Upgrading an app to use React 18 and want to continue using @axe-core/react

[another1aa]

Need this too please, any update on when to expect it? Or any workaround until ready? Thanks!

[saileshkotha]

Below works for me in React 18. I guess the initialization readme needs to be updated for react 18 with below example

import React from 'react';
import {createRoot} from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
    <div>Hello World</div>
);

if (process.env.NODE_ENV !== 'production') {
  // eslint-disable-next-line global-require
  const axe = require('@axe-core/react');
  axe(React, root, 1000);
}

[mithodin]

@saileshkotha doesn't work for me. Not sure why it does for you but I'm pretty sure this is not the fix.

[AustinGarrod]

Any update on adding this support?

[damian08k]

It works for me if I import ReactDOM from react-dom/client.
React and ReactDOM version:

"react": "^18.1.0",
"react-dom": "^18.1.0",

This is my index.tsx file:

// /* eslint-disable @typescript-eslint/no-non-null-assertion */

import React, { StrictMode } from 'react';
import ReactDOM, { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';

import store from 'store/store';

import App from './App';

if (process.env.NODE_ENV !== 'production') {
  const axe = require('@axe-core/react');

  axe(React, ReactDOM, 1000);
}

const container = document.getElementById('root');
const root = createRoot(container as HTMLElement);

root.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
);

And result in console:

[mithodin]

@damian08k it works on the initial render, but not on subsequent updates.

[damian08k]

@mithodin Yes, you're right. I didn't notice that.
So maybe let's try to ping axe-core creator I belive @michael-siek

Is there any chance to update @axe-core/react to use in React 18+ projects?

[michael-siek]

@damian08k We will be working on this soon to be able to support all React 18+ projects

[sneko]

I'm also interested by a workaround, if any of you have a sample repo :D ... currently using Next 13 but I guess it's adaptable once working with React 18

Thank you,