Issue with "navigator is not defined", error during next build about jupyter-ui HOT 8 CLOSED

Since I have verified that using dynamic imports of the components works, I believe we can consider this matter resolved. Thank you, @echarles, for your assistance!

from jupyter-ui.

The issue is coming from the lumino package domutils which access the window.navigator. Currenlty the "use client" at the top of the page.tsx does not seem to be enough for next.js to not compile on server that part.

I have tried the following with success

"use client"

import { useState, useEffect } from 'react';

export default function Home() {
  const [Jupyter, setJupyter] = useState<any>(undefined);
  const [Notebook, setNotebook] = useState<any>(undefined);
  useEffect(() => {
    // Keep the import in this useEffect to avoid Lumino domutils breaking Next.js server compilation.
    const { Jupyter } = require('@datalayer/jupyter-react');
    const { Notebook } = require('@datalayer/jupyter-react');
    setJupyter(Jupyter);
    setNotebook(Notebook);
  }, []);
  return (
    Jupyter && Notebook
    ?
      <>
        <h1>Jupyter React in Next.js</h1>
        <Jupyter
          jupyterServerHttpUrl="https://oss.datalayer.tech/api/jupyter"
          jupyterServerWsUrl="wss://oss.datalayer.tech/api/jupyter"
          jupyterToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
        >
          <Notebook
            path="ipywidgets.ipynb"
            uid="notebook-nextjs-1"
          />
        </Jupyter>
      </>
    :
      <></>
  )
}
```

from jupyter-ui.

Docusaurus build has similar constraints (not build on server the jupyterlab/lumino parts). With docusaurus, you can use the BrowserOnly component. I don't know next.js well, so any feedback on how to implement similar behavior for next.js will be much appreciated. Thx!

from jupyter-ui.

Alright, I understand. Now that you've explained this, one workaround is to include the following line of code in your layout.tsx file of your Next.js app to disable server-side rendering (SSR). This solution seems to be effective and allows for a successful build. However, by applying this at the layout level, SSR will be disabled for the entire app. I tried to disable SSR for the specific page where Jupyter and Notebook is imported but not working. We may need to explore alternative approaches to make it work.

export const dynamic = 'force-dynamic'

from jupyter-ui.

Will try that, otherwise I have moved the code outside of the page and it works. Will push options.

from jupyter-ui.

By setting export const dynamic = 'force-dynamic' in layout, still prompt the error, I use it locally nextjs 14.1.3

from jupyter-ui.

By setting export const dynamic = 'force-dynamic' in layout, still prompt the error, I use it locally nextjs 14.1.3

@chenjpu Have you set 'use client? this is often the cause of the issues.

https://github.com/datalayer/jupyter-ui/blob/main/examples/next-js/src/app/page.tsx#L7

from jupyter-ui.

@echarles Thanks, I have found the cause of the problem

from jupyter-ui.