@datalayer/jupyter-react not working in nextjs pages router: Global CSS cannot be imported from within node_modules.

[epshone]

Description

When copying the nextjs example repo I was unable to get it working in the pages router.

The following error is produced:

 % yarn dev
  ▲ Next.js 14.2.5
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1083ms
 ○ Compiling / ...
(node:39699) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
 ⨯ ./node_modules/@datalayer/jupyter-react/lib/components/commands/CommandsAdapter.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@datalayer/jupyter-react/lib/components/commands/CommandsAdapter.js

Import trace for requested module:
./node_modules/@datalayer/jupyter-react/lib/components/commands/CommandsAdapter.css
./node_modules/@datalayer/jupyter-react/lib/components/commands/CommandsAdapter.js
./node_modules/@datalayer/jupyter-react/lib/components/commands/Commands.js
./node_modules/@datalayer/jupyter-react/lib/index.js
./components/NotebookComponent.tsx

Any help is greatly appreciated!

Reproduce

Switching app -> pages router causes the issue. See this forked repo: https://github.com/datalayer-examples/jupyter-nextjs-example/compare/main...epshone:jupyter-nextjs-pages-example:main

Loading localhost:3000/ causes the errors above

Expected behavior

Hopefully datalayer is compatible with the pages router.

Context

• Datalayer version: ^0.10.0 (same as example)
• Operating System and version: Sonoma 14.5
• Browser and version: Google Chrome: Version 126.0.6478.183 (Official Build) (arm64)