React Widget library conflict

JupyterLab extensions
,
1

Hi everyone,

I’m currently building a visualization extension in JupyterLab, and to achieve that I currently have built an extension that opens up a new tab in JupyterLab in which I embedded multiple React components. Up until that point, everything works fine. My issue is that as soon as I try to install any external library that has dependencies with react, which I will eventually need to build some charts, it causes the build of the extension to break.
I have tried a few libraries, such as react-bootstrap, nivo and a few others, and it always results in clashes with the dependencies.

To reproduce :

conda create -n <env-name> --override-channels --strict-channel-priority -c conda-forge -c nodefaults jupyterlab=3 cookiecutter nodejs jupyter-packaging git
conda activate <env-name>
cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts

cd <my-extension-name>
pip install -ve .
jupyter labextension develop --overwrite .
# then opening jupyterLab
jupyter lab

Then inside JupyterLab’s terminal :

npm install bootstrap react-bootstrap

And add a simple import statement at the top of src/index.ts :

import { Button } from 'react-bootstrap';

Now if I build the extension with jlpm run build, it causes a plethora of errors (if we ignore the one saying that I haven’t used the imported Button), which indicate that there is a dependency clash between I guess the version of React required by react-bootstrap, and the one installed by default with JupyterLab. I now struggle to solve that dependency problem and would welcome any suggestions on how to handle the installation of any external package that deals with React within JupyterLab, since I haven’t been able to get one working. I’m also open to using another library for plotting if someone knows of a good library that would not have dependency problems with React (I have also tried plotly.js, but run into another dependency problem).

Thank you for your help !

2

For those wondering :
react-boostrap requires @restart/ui as part of its dependencies, which in turns requires @types/react as a dependency. But due to some other dependencies, the pre-installed version of @types/react is too old to match some of the @restart/ui dependency requirements (in particular the uncontrollable package), resulting in errors due to @types/react being installed twice with 2 different versions.
To solve that, you can add the following to package.json :

"resolutions": {
    "@types/react": "^17.0.0",
    "@restart/ui": "1.6.1"
  },

You will still need to clean your node_modules and yarn.lockor package-lock.json with :

rm -rf node_modules
rm yarn.lock
rm package-lock.json

Then, run jlpm install to re-install all the dependencies, and finally install react-bootstrap with jlpm add bootstrap react-bootstrap and you should be able to use the library without errors now.
Note that if you’re using npm instead of jlpm/yarn, you should add :

"overrides": {
    "@types/react": "^17.0.0"
  },

to your package.json instead, and now after removing the node_modules and the package-lock.json and running npm install it should be good to go.

1 Like