Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example works but tons of errors in console #5

Open
c0mm4nd opened this issue Jun 26, 2024 · 3 comments
Open

Example works but tons of errors in console #5

c0mm4nd opened this issue Jun 26, 2024 · 3 comments

Comments

@c0mm4nd
Copy link

c0mm4nd commented Jun 26, 2024

(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.

image

@echarles
Copy link
Collaborator

@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
Copy link
Collaborator

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

@c0mm4nd
Copy link
Author

c0mm4nd commented Jun 27, 2024

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants