Error while trying to use Jupyter-ui in a Next.js app

[Jay-Patel-257]

Description

When I tried to display a Notebook Component in one of my Next.js app It resulted in a compilation error. It happened right after installing the @datalayer/jupyter-react dependency. Because of the that i decided to try the next js example code from here. That gave the same error even though I'm using Yarn V3.

Reproduce

1. clone the repo
2. yarn install
3. yarn dev

The error seems to be coming from Pyodide and I am planning to use it in future. But Idon't know how to resolve this error.

Note: My corepack is not enabled and I wasn't able to figure out how. I don't know if that is causing error.

Expected behavior

The app to compile normally without error.

Context

• Datalayer version: 0.10.0
• Operating System and version: windows 11
• Browser and version: Microsoft Edge Version 125.0.2535.67

Browser Output

hydration-error-info.ts:72 
 ./node_modules/@jupyterlite/pyodide-kernel/pypi/widgetsnbextension-4.0.10-py3-none-any.whl
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

It would be great if anybody could address this issue.

[echarles]

Just replied on datalayer-examples/jupyter-nextjs-example#4 (comment)

[mattmutt]

For the purposes of debugging, does this help?

• remove the "@datalayer/jupyter-react": "workspace:^", line from the top level package.json
• yarn install inside the nextjs example folder help?

I was seeing reference errors inside the app's page.tsx for ColorMode. It's import statements can be shortened too.

[echarles]

the next-js example in this repos aims to depend on the jupyter-react source changes. If you remove the "@datalayer/jupyter-react": "workspace:^", the yarn install will pull the latest release which may not have all the source code changes. The easiest way to get started is to have a separated example project based on https://github.com/datalayer-examples/jupyter-nextjs-example