Error importing ReactDOM/client

[paddymul]

I am trying to integrate a react component into an ipywidget.

I'm running into trouble with these lines of ts

import { createRoot } from "react-dom/client";
const root = createRoot(this.el as HTMLElement)

I get the following error in the console:

error TypeError: m.createRoot is not a function

I think the problem has something to do with webpack or tsconfig module definition but I'm not sure. I see that this repo sets libraryTarget: 'amd'. But I see no mention of AMD in most react examples I can find. Any suggestions?

[paddymul]

Here is a repo that reproduces the error:
https://github.com/paddymul/widget-ts-cookiecutter-error

I installed this extension into my jupyterlab with the following commands:

jupyter labextension develop --overwrite .
jupyter nbextension install --sys-prefix --symlink --overwrite --py myproject
yarn run build

[rgbkrk]

This... might mean that there's a different version of react-dom on the page, even though your extension is specifying React 18.

[maartenbreddels]

Hi Paddy,

I just setup a project based on this cookie-cutter (as I mentioned on manzt/anywidget#97 (comment) )
So I was surprised this happened.
I cloned your repo, and got a different error message:

manager-base.js:575 TypeError: Cannot read properties of undefined (reading 'ExampleModel')
    at manager.js:159:13
    at async u.loadModelClass (manager-base.js:572:13)
    at async u._make_model (manager-base.js:410:13)

Looking at paddymul/widget-ts-cookiecutter-error@386be59 I thought the module being produced is bad. I reverted all your changes, and still got the error message.
Only after a git clean -dfx (be careful running that!), did I get rid of that error, and now everything (yes, you widget) is working.
My guess is, it is the pesky ts compiler caching things.
Let me know if this solves it.

Regard,

Maarten

PS: maybe you would benefit from using ipyreact? I could publish it.

[maartenbreddels]

Actually, I was testing in the classical notebook. Testing it in Jupyter Lab I got the same issue. This is because by default jupyter lab will provide react and react-dom for you. To fix this, add:

  "jupyterlab": {
    "extension": "lib/plugin",
    "outputDir": "ipyreact/labextension/",
    "sharedPackages": {
      "@jupyter-widgets/base": {
        "bundled": false,
        "singleton": true
      },
      "react": false,
      "react-dom": false
    }
  }

to your package.json (modulo a name change)

[paddymul]

Thank you, that helped me fix the problem and import React!!

I did a quick search for options under sharedPackages, and couldn't find anything.

I'm happy to create a PR against the proper project that has the proper guidance so others don't run into this problem... But I'm not sure where to create this PR or to file a bug.

I guess the piece of documentation I would want would have a title along the lines of:
"How to import other NPM packages into your IPYWidget"
and somewhere there would be a note about:
"this is the default list of packages included into the JS environemnt for an ipywidget, along with versions. If your ipywidget requires a different package version, you must explictly set it to false"

[maartenbreddels]

it's documented here: https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html#deduplication-of-dependencies

[maartenbreddels]

I'm not 100% who can provide the extension or not, I think it might be good to ask jupyter lab people. Is it a limited list? Can any extension provide it?

[paddymul]

I created a jupyterLab bug about this . jupyterlab/jupyterlab#14294