search

datalayer / jupyter-ui

⚛️ React.js components 💯% compatible with 🪐 Jupyter - Storybook on https://jupyter-ui-storybook.datalayer.tech
https://jupyter-ui.datalayer.tech
Other
325 stars 46 forks source link

Bug: 🐛 Using Notebook element throws an error? #47

Closed eiymba closed 1 year ago

eiymba commented 1 year ago

Description

Hello! I'm trying to use the <Notebook> element provided by the library, but unfortunately it throws an error in the console and nothing is rendered? The console shows this:

image

Reproduce

Note: Assume my python environment is active and that the python dependencies are already installed. You may also assume that ping.ipynb exists in the directory specified.

  1. I created an evergreen project using: 
    yarn create create-react-app --template typescript
  2. I then added the list of resolutions found in your docs here: https://jupyter-ui.datalayer.tech/docs/examples/create-react-app/, and tweaked it slightly to resolve some modules to a stable version. This was purely for convenience; the error still persisted with the suggested resolutions. 
      {
    "**/@types/react": "18.0.27",
    "**/@types/react-dom": "18.0.10",
    "**/react": "18.2.0",
    "**/react-dom": "18.2.0",
    "**/@jupyter-widgets/base": "6.0.2",
    "**/@jupyter-widgets/controls": "5.0.2",
    "**/@jupyter-widgets/html-manager": "1.0.4",
    "**/@jupyter-widgets/jupyterlab-manager": "5.0.4",
    "**/@jupyter-widgets/output": "6.0.2",
    "**/@jupyterlab/application": "4.0.0-alpha.18",
    "**/@jupyterlab/apputils": "4.0.0-alpha.18",
    "**/@jupyterlab/attachments": "4.0.0-alpha.18",
    "**/@jupyterlab/cells": "4.0.0-alpha.18",
    "**/@jupyterlab/codeeditor": "4.0.0-alpha.18",
    "**/@jupyterlab/codemirror": "4.0.0-alpha.18",
    "**/@jupyterlab/collaboration": "4.0.0-alpha.18",
    "**/@jupyterlab/completer": "4.0.0-alpha.18",
    "**/@jupyterlab/console": "4.0.0-alpha.18",
    "**/@jupyterlab/coreutils": "6.0.0-alpha.18",
    "**/@jupyterlab/docmanager": "4.0.0-alpha.18",
    "**/@jupyterlab/docprovider": "4.0.0-alpha.18",
    "**/@jupyterlab/docregistry": "4.0.0-alpha.18",
    "**/@jupyterlab/documentsearch": "4.0.0-alpha.18",
    "**/@jupyterlab/filebrowser": "4.0.0-alpha.18",
    "**/@jupyterlab/fileeditor": "4.0.0-alpha.18",
    "**/@jupyterlab/inspector": "4.0.0-alpha.18",
    "**/@jupyterlab/javascript-extension": "4.0.0-alpha.18",
    "**/@jupyterlab/json-extension": "4.0.0-alpha.18",
    "**/@jupyterlab/launcher": "4.0.0-alpha.18",
    "**/@jupyterlab/lsp": "4.0.0-alpha.18",
    "**/@jupyterlab/mainmenu": "4.0.0-alpha.18",
    "**/@jupyterlab/markdownviewer": "4.0.0-alpha.18",
    "**/@jupyterlab/markedparser-extension": "4.0.0-alpha.18",
    "**/@jupyterlab/mathjax2": "4.0.0-alpha.18",
    "**/@jupyterlab/nbconvert-css": "4.0.0-alpha.18",
    "**/@jupyterlab/nbformat": "4.0.0-alpha.18",
    "**/@jupyterlab/notebook": "4.0.0-alpha.18",
    "**/@jupyterlab/observables": "5.0.0-alpha.18",
    "**/@jupyterlab/outputarea": "4.0.0-alpha.18",
    "**/@jupyterlab/rendermime": "4.0.0-alpha.18",
    "**/@jupyterlab/rendermime-extension": "4.0.0-alpha.18",
    "**/@jupyterlab/rendermime-interfaces": "3.8.0-alpha.18",
    "**/@jupyterlab/services": "7.0.0-alpha.18",
    "**/@jupyterlab/settingregistry": "4.0.0-alpha.18",
    "**/@jupyter/ydoc": "1.0.0",
    "**/@jupyterlab/statedb": "4.0.0-alpha.18",
    "**/@jupyterlab/terminal": "4.0.0-alpha.18",
    "**/@jupyterlab/theme-dark-extension": "4.0.0-alpha.18",
    "**/@jupyterlab/theme-light-extension": "4.0.0-alpha.18",
    "**/@jupyterlab/translation": "4.0.0-alpha.18",
    "**/@jupyterlab/ui-components": "4.0.0-alpha.33",
    "**/@lumino/default-theme": "1.0.0-alpha.6",
    "**/@lumino/algorithm": "2.0.0",
    "**/@lumino/application": "2.0.0",
    "**/@lumino/collections": "2.0.0",
    "**/@lumino/commands": "2.0.0",
    "**/@lumino/coreutils": "2.0.0",
    "**/@lumino/disposable": "2.0.0",
    "**/@lumino/domutils": "2.0.0",
    "**/@lumino/dragdrop": "2.0.0",
    "**/@lumino/keyboard": "2.0.0",
    "**/@lumino/messaging": "2.0.0",
    "**/@lumino/polling": "2.0.0",
    "**/@lumino/properties": "2.0.0",
    "**/@lumino/signaling": "2.0.0",
    "**/@lumino/virtualdom": "2.0.0",
    "**/@lumino/widgets": "2.0.0"
    }
  3. I appended the following to the public/index.html file, as suggested in the docs, and here 
    <script id="datalayer-config-data" type="application/json">
  {
    "jupyterServerHttpUrl": "http://localhost:8686/api/jupyter",
    "jupyterServerWsUrl": "ws://localhost:8686/api/jupyter",
    "jupyterToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
  }
</script>
  4. I installed your package 
    yarn add @datalayer/jupyter-react@0.2.2 --exact --peer
  5. I created a new Jupyter server config file from the example here, and tweaked this line (it loads the notebooks from the ./notebooks directory in my project) 
    content_dir = os.path.join(os.path.dirname(os.path.realpath(__file__)),'notebooks')
  6. In a separate terminal I ran the following command using the created config file from the previous step 
    jupyter server --config=.\jupyter_server_config.py
  7. Once Jupyter server was running, I started the react dev server with the following command 
    yarn start

  8. Inside App.tsx, I deleted all the boiler plate and imported the library, e.g.

     import { Notebook } from "@datalayer/jupyter-react";
 ...

 <Notebook path="ping.ipynb" />
  9. The component throws an error.

Expected behavior

A nice, wonderful notebook rendered. ✨🚀

Context

Browser Output 
Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

Uncaught (in promise) Error: Disposed
    at SessionContext.changeKernel (sessioncontext.js:333:1)
    at NotebookAdapter.js:239:1
Environment
  • Node version: 18
  • Yarn version: 1.22
  • Create React App version: 5
  • Python environment: 3.10
Python environment dependencies 
python = "^3.10"
build = "^0.10.0"
hatch = "^1.7.0"
jupyterlab = "4.0.0b0"
Node dependencies 
{
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-syntax-flow": "^7.21.4",
    "@babel/plugin-transform-react-jsx": "^7.14.9",
    "@datalayer/jupyter-react": "0.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "reactflow": "^11.7.0",
    "web-vitals": "^2.1.4"
  }

Happy to provide more information. Thanks!

echarles commented 1 year ago

I will cut a new release today and will apply the steps you describe (they sound good at first read). Maybe there is a glitch in the doc. Let me double-check and fix.

echarles commented 1 year ago

@datalayer/jupyter-react 0.3.0 is released and the steps to use it in a create-react-app are detailled on https://jupyter-ui.datalayer.tech/docs/examples/cra

BTW your error may be due to React Strict Mode which is not supported ATM https://jupyter-ui.datalayer.tech/docs/examples/cra/index.html#strict-mode - Before changing everything, you may give a try simply by removing the use of StrickMode.

eiymba commented 1 year ago

@echarles Ah, yes! I did wonder about. Actually, removing it did solve the problem for me, so apologies for your inconvenience.

Thanks for your help! 🙏 I will upgrade to the new release to play with too.