Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global CSS import error on NextJS #10

Closed
austinbuckler opened this issue Jun 5, 2022 · 7 comments
Closed

Global CSS import error on NextJS #10

austinbuckler opened this issue Jun 5, 2022 · 7 comments

Comments

@austinbuckler
Copy link

Screen Shot 2022-06-05 at 2 21 27 PM

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
Copy link
Owner

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
Copy link

hi @RickoNoNo3 @austinbuckler, any fix for this?

@RickoNoNo3
Copy link
Owner

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

@cokencorn
Copy link

Hi @RickoNoNo3, any updates on this?

@alisahindev
Copy link

alisahindev commented Dec 13, 2022

@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
Copy link
Owner

RickoNoNo3 commented Jan 4, 2023

@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
  1. 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});
  1. Then play at will!

See our new doc for more.

@masonkieth
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants