Global CSS import error on NextJS

[austinbuckler]

I get a failed to compile error when importing react-winbox in Next.JS due to react-winbox including the base styles. Users should choose to import these base styles vs react-winbox including them by default. I can provide a PR that fixes this if you'd like.

See error here:

Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-winbox/dist/index.js```

[RickoNoNo3]

Thank you for your discovery. When I encapsulated Winbox's CSS files into this component, I didn't consider so much. At that time, my idea was that this CSS file belongs to the winbox package instead of react-Winbox. If users need to import CSS by themselves, they will have to manually install the two packages at the same time--now they only need one. Now that you have found the problem, I need to think about how to balance the two things. How about creating a copy of the relevant CSS in this project?

[sugamkarki]

hi @RickoNoNo3 @austinbuckler, any fix for this?

[RickoNoNo3]

@sugamkarki I'm new to NextJS still now, is my previous proposal feasible? It will be fixed for soon if possible.

[cokencorn]

Hi @RickoNoNo3, any updates on this?

[alisahindev]

@cokencorn @sugamkarki

I have fixed it by next-transpile-modules

Here is the details in next.config.js file

const withTM = require('next-transpile-modules')([
  'react-winbox'
])

module.exports = withTM({
  // additional webpack configurations
})

[RickoNoNo3]

@austinbuckler @sugamkarki @cokencorn
Hi, I Just tested @alisahindev's solution. It works well within following steps:

1. install react-winbox@1.5.0 into your project.
2. Do the same thing as @alisahindev did.
3. in _app.js:

import 'winbox/dist/css/winbox.min.css';
import 'winbox/dist/css/themes/modern.min.css'; // optional
import 'winbox/dist/css/themes/white.min.css'; // optional

4. in files you want to use react-winbox:

//import WinBox from 'react-winbox'; // do not use this, use below:
import dynamic from 'next/dynamic';
const WinBox = dynamic(() => import('react-winbox'), {ssr: false});

5. Then play at will!

See our new doc for more.

[masonkieth]

FYI -- I'm not too familiar with the next-transpile-modules package and what it's supposed to solve, but it seems to break my sass files and the ui-library I'm using. For my set up it ended not being required at all. I just removed it and everything is working fine...

NextJS 13.5.4
React (latest) I think it's > 18
Sass 1.68
IBM Carbon React 1.42