How to use a react package in nextjs that contains css

[lewatt23]

Hello is been some days now that am trying to use a react-package in my next project but each time, time i wish to import i get this error

Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-images-upload/compiled.js

Please can someone tell me how i can go about using this component with having this error ?

[jamesmosier]

This guide can tell you how...

https://err.sh/next.js/css-npm

[joshkadis]

(also...thanks!)

[jamesmosier]

I import these 3 CSS files from my node_modules and they work as expected:

import 'react-toastify/dist/ReactToastify.css';
import 'tippy.js/themes/light-border.css';
import 'onfido-sdk-ui/dist/style.css';

[joshkadis]

Cool, thanks. Looks like those packages keep the CSS and JS separated, i.e. the source files for React components like <Toast> are ignorant of CSS. That and CSS-in-JS solutions work fine for me as well.

In the package I'm trying to work with, the React source files use css-loader style imports, e.g.

import `./MyButton.css`
// blah blah blah some JSX
export default MyButton;

Have you seen any Next-compatible packages using this approach?

[joshkadis]

I think I answered my own question, the package needs to handle its own Webpack business.

I guess I can also try a custom next.config.js to so that the webpack loaders also include that package from node_modules although that seems...brittle.

[jamesmosier]

I haven't come across anything quite like that personally, but sounds like you are on the right track with either needing some special webpack loader options or the package should export the CSS file as a standalone file.