Global CSS cannot be imported from within node_modules.

[breno-sapucaia]

Description

im working on a nextjs@11 project and im trying to implement the jupyter ui, my end goal is just edit a file without the needing of a server, but im receiving this bug on my terminal about the css:

• Global CSS cannot be imported from within node_modules.

error - ./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

Reproduce

install the
"@datalayer/icons-react": "^0.3.0",
"@datalayer/jupyter-react": "^0.12.1",
"@datalayer/primer-addons": "^0.3.0",
"svg-url-loader": "^8.0.0",
"raw-loader": "^4.0.2",

and try to embed the jupyter notebook component

<Jupyter lite={true}>
    <Notebook ipywidgets={'classic'} nbformat={{ ...initialFileContent }} />
</Jupyter>

Expected behavior

should work as normal right?

Context

im creating an web edit environment for my .ipynb files that is current deployed, so im downloading them and trying to render the Jupyter and Notebook componets on the ui

• Datalayer version: 0.12.0
• Operating System and version: macOS monterry 12.5
• Browser and version: chrome@latest

Browser Output

nothing is displayed

[breno-sapucaia]

im using dynamic from next to import the component that is rendering the @jupyterui components

[breno-sapucaia]

I didn't find any thing on docs about how to embed in an existing project so I'm trying to embed in my nextjs app following how the next.config.js and package.json is currently setted up in the nextjs example

[echarles]

@breno-sapucaia Next.js is sometimes tricky as not relying on webpack by default. Can you check that your config looks like this example ? https://github.com/datalayer-examples/jupyter-nextjs-example/blob/main/next.config.js

[breno-sapucaia]

@echarles hey, thanks for the reply this is how my next.config.js is configurated

[breno-sapucaia]

also, i noticed sometimes when using ui components as packages on nextjs applications, the package advice us to import all css under _app.js usually, shouldn't that be followed here as well?

[echarles]

Hi @breno-sapucaia Is it resolved for you? Otherwise it is fine to leave it open if you prefer.

also, i noticed sometimes when using ui components as packages on nextjs applications, the package advice us to import all css under _app.js usually, shouldn't that be followed here as well?

Could you paste here the log that tells that?

[epshone]

@echarles I am having this same issue in the pages router. An example repo working in the pages router would be amazing

[echarles]

@epshone sorry for the late reply. There are a bunch of issues to be fixed for next-js. Is #271 the detail of the issue you mention?