1

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 which results in an error.

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>;
};
  1. 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"

LukasP
  • 31
  • 1
  • 6
  • 1
    My guess is that it gets de-duplicated by webpack; you can override the deduplication strategy as described in docs: https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html#deduplication-of-dependencies - please let me know if this does not help. – krassowski Oct 17 '22 at 01:00

2 Answers2

0

If you need to change to a specific version of React, you can run this in the terminal:

npm install --save react@18.2.0
David
  • 705
  • 1
  • 6
  • 22
  • Well that's exactly what I'm doing with `yarn add react@18.2.0` which adds react to the dependencies. – LukasP Oct 14 '22 at 13:45
0

Thanks to krassowski for giving me the link to the answer!

In my package.json, I added two entries for react and react-dom to sharedPackages so that I get:

  "jupyterlab": {
    "extension": "lib/plugin",
    "outputDir": "testproject/labextension/",
    "sharedPackages": {
      "@jupyter-widgets/base": {
        "bundled": false,
        "singleton": true
      },
      "react": {
        "bundled": true,
        "singleton": true
      },
      "react-dom": {
        "bundled": true,
        "singleton": true
      }
    }
  }
LukasP
  • 31
  • 1
  • 6