Example works but tons of errors in console

[c0mm4nd]

(base) [c0mm4nd@homelab jupyter-nextjs-example]$ yarn dev
 ⚠ Port 3000 is in use, trying 3001 instead.
 ⚠ Port 3001 is in use, trying 3002 instead.
  ▲ Next.js 14.2.4
  - Local:        http://localhost:3002

 ✓ Starting...
TypeError: fetch failed
    at node:internal/deps/undici/undici:12502:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getVersionInfo (/home/c0mm4nd/jupyter-nextjs-example/node_modules/next/dist/server/dev/hot-reloader-webpack.js:215:21)
    at async Span.traceAsyncFn (/home/c0mm4nd/jupyter-nextjs-example/node_modules/next/dist/trace/trace.js:154:20)
    at async HotReloaderWebpack.start (/home/c0mm4nd/jupyter-nextjs-example/node_modules/next/dist/server/dev/hot-reloader-webpack.js:607:28)
    at async startWatcher (/home/c0mm4nd/jupyter-nextjs-example/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:156:5)
    at async setupDevBundler (/home/c0mm4nd/jupyter-nextjs-example/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:775:20)
    at async Span.traceAsyncFn (/home/c0mm4nd/jupyter-nextjs-example/node_modules/next/dist/trace/trace.js:154:20)
    at async initialize (/home/c0mm4nd/jupyter-nextjs-example/node_modules/next/dist/server/lib/router-server.js:78:30)
    at async Server.<anonymous> (/home/c0mm4nd/jupyter-nextjs-example/node_modules/next/dist/server/lib/start-server.js:249:36) {
  [cause]: AggregateError [ETIMEDOUT]:
      at internalConnectMultiple (node:net:1117:18)
      at internalConnectMultiple (node:net:1185:5)
      at Timeout.internalConnectMultipleTimeout (node:net:1711:5)
      at listOnTimeout (node:internal/timers:575:11)
      at process.processTimers (node:internal/timers:514:7) {
    code: 'ETIMEDOUT',
    [errors]: [
      [Error], [Error], [Error],
      [Error], [Error], [Error],
      [Error], [Error], [Error],
      [Error], [Error], [Error],
      [Error], [Error], [Error],
      [Error], [Error], [Error],
      [Error], [Error], [Error],
      [Error], [Error], [Error]
    ]
  }
}
 ✓ Ready in 4.5s
 ○ Compiling / ...
 ⚠ ./node_modules/@jupyterlab/apputils/node_modules/@jupyterlab/settingregistry/lib/settingregistry.js
Attempted import error: 'parse' is not exported from 'json5' (imported as 'json5').

Import trace for requested module:
./node_modules/@jupyterlab/apputils/node_modules/@jupyterlab/settingregistry/lib/settingregistry.js
./node_modules/@jupyterlab/apputils/node_modules/@jupyterlab/settingregistry/lib/index.js
./node_modules/@jupyterlab/apputils/lib/toolbar/factory.js
./node_modules/@jupyterlab/apputils/lib/toolbar/index.js
./node_modules/@jupyterlab/apputils/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/components/cell/CellAdapter.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx

./node_modules/@jupyterlab/settingregistry/lib/settingregistry.js
Attempted import error: 'parse' is not exported from 'json5' (imported as 'json5').

Import trace for requested module:
./node_modules/@jupyterlab/settingregistry/lib/settingregistry.js
./node_modules/@jupyterlab/settingregistry/lib/index.js
./node_modules/@jupyterlab/toc-extension/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/components/jupyterlab/JupyterLabAppPlugins.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx

./node_modules/@jupyterlab/settingregistry/lib/settingregistry.js
Attempted import error: 'parse' is not exported from 'json5' (imported as 'json5').

Import trace for requested module:
./node_modules/@jupyterlab/settingregistry/lib/settingregistry.js
./node_modules/@jupyterlab/settingregistry/lib/index.js
./node_modules/@jupyterlab/toc-extension/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/components/jupyterlab/JupyterLabAppPlugins.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx

./node_modules/@jupyterlite/settings/lib/settings.js
Attempted import error: 'parse' is not exported from 'json5' (imported as 'json5').

Import trace for requested module:
./node_modules/@jupyterlite/settings/lib/settings.js
./node_modules/@jupyterlite/settings/lib/index.js
./node_modules/@jupyterlite/server-extension/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/jupyter/lite/LiteServer.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx

./node_modules/glslify-deps/sync.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/glslify-deps/sync.js
./node_modules/glslify/index.js
./node_modules/regl-scatter2d/bundle.js
./node_modules/plotly.js/src/traces/scattergl/plot.js
./node_modules/plotly.js/src/traces/scattergl/index.js
./node_modules/plotly.js/lib/scattergl.js
./node_modules/plotly.js/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/jupyter/renderers/plotly/PlotlyRenderer.js
./node_modules/@datalayer/jupyter-react/lib/components/viewer/input/InputViewer.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx

./node_modules/glslify/transform.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/glslify/transform.js
./node_modules/glslify/index.js
./node_modules/regl-scatter2d/bundle.js
./node_modules/plotly.js/src/traces/scattergl/plot.js
./node_modules/plotly.js/src/traces/scattergl/index.js
./node_modules/plotly.js/lib/scattergl.js
./node_modules/plotly.js/lib/index.js
./node_modules/@datalayer/jupyter-react/lib/jupyter/renderers/plotly/PlotlyRenderer.js
./node_modules/@datalayer/jupyter-react/lib/components/viewer/input/InputViewer.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx
 GET / 200 in 29719ms
 GET / 200 in 38394ms

same to what I said in datalayer/jupyter-ui#252

UI and notebook are working fine in the browser.

[echarles]

@c0mm4nd Yes, that behavior is similar to what is described in #4

JupyterLab and JupyterLite strongly rely on webpack. There should be a way to avoid those error messages. I have tried but not yet found a solution. The issue is at the instersection of next.js and webpack.js

Still the notebook is running fine. The production build works fine also for me.

[echarles]

btw after yarn build, yarn start does not give those error messages

[c0mm4nd]

I just tried the lite={true} as decribed in https://jupyter-ui.datalayer.tech/docs/components/notebook/#with-in-browser-kernel

The Notebook seems crashed.

error:

kernel.js:52 Uncaught (in promise) PythonError: Traceback (most recent call last):
  File "/lib/python311.zip/_pyodide/_base.py", line 573, in eval_code_async
    await CodeRunner(
  File "/lib/python311.zip/_pyodide/_base.py", line 395, in run_async
    await coroutine
  File "<exec>", line 3, in <module>
  File "/lib/python3.11/site-packages/micropip/_commands/install.py", line 142, in install
    await transaction.gather_requirements(requirements)
  File "/lib/python3.11/site-packages/micropip/transaction.py", line 204, in gather_requirements
    await asyncio.gather(*requirement_promises)
  File "/lib/python3.11/site-packages/micropip/transaction.py", line 217, in add_requirement
    await self.add_wheel(wheel, extras=set(), specifier="")
  File "/lib/python3.11/site-packages/micropip/transaction.py", line 383, in add_wheel
    await wheel.download(self.fetch_kwargs)
  File "/lib/python3.11/site-packages/micropip/transaction.py", line 100, in download
    with ZipFile(data) as zip_file:
         ^^^^^^^^^^^^^
  File "/lib/python311.zip/zipfile.py", line 1301, in __init__
    self._RealGetContents()
  File "/lib/python311.zip/zipfile.py", line 1368, in _RealGetContents
    raise BadZipFile("File is not a zip file")
zipfile.BadZipFile: File is not a zip file

    at new_error (pyodide.asm.js:9:10014)
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at _PyEM_TrampolineCall_JS (pyodide.asm.js:9:120223)
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at pyodide.asm.wasm
    at Module.callPyObjectKwargs (pyodide.asm.js:9:64297)
    at Module.callPyObject (pyodide.asm.js:9:65365)
    at wrapper (pyodide.asm.js:9:32855)

There is a 404 error in the Network panel, requesting http://localhost:3000/_next/pypi/piplite-0.2.3-py3-none-any.whl

The source code of the notebook component (no any other change):

'use client'

import { Jupyter, Notebook, CellSidebar } from '@datalayer/jupyter-react';

export const NotebookComponent = () => {
  return (
    <>
      <div style={{fontSize: 20}}>Jupyter Notebook in Next.js</div>
      <Jupyter
        lite={true}
      >
        <Notebook
          ipywidgets={'classic'}
          nbformat={{
            cells: [
              {
                cell_type: 'code',
                outputs: [],
                source: 'print("Hello, World!")',
              }
            ],  
            metadata: {
              kernelspec: {
                display_name: 'Python 3 (ipykernel)',
                language: 'python',
                name: 'python3',
              },
            },
            nbformat: 4,
            nbformat_minor: 5,
          }}
        />
    </Jupyter>
  </>
  )
}

export default NotebookComponent;