Unable to use different React version

[LukPopp0]

Hi,

I'm trying to write a Jupyter Widget that uses react based on this cookiecutter. I specifically need to use a certain version of react. However, even when installing a specific version, after building the widget, a different version is used in the jupyterlab frontend. The react version that is installed in the node_modules folder is the version that I want to use and no other module has react as a dependency. In the node_modules folder, there is also no trace of a different react version to be found.

Specifically, I want to use react 18.2.0. The version that I get by logging React.version in the frontend is react 17.0.2. Obviously, I am not able to use React 18 features like useId.

How can I use a different version of react? And where does this other react version 17.0.2 come from?

Reproduce:

1. Install the cookiecutter as described in the README.
2. Install react and react-dom via jlpm/yarn add react@18.2.0 react-dom@18.2.0.
3. Add a simple React component in a new file:

import React from 'react';

export const SimpleComponent = () => {
  console.log('React.version:', React.version);
  return <div>Simple Test</div>;
};

4. Render the react component in the render() function of the view in index.ts:

render() {
  this.component = React.createElement(SimpleComponent);
  ReactDOM.render(this.component, this.el);
}

Console shows: "React.version: 17.0.2"