hbatalhaStch/react-big-scheduler

Next.js does not like imported css

Closed this issue · 3 comments

wbern commented

Hey!

I'm getting the following error Global CSS cannot be imported from within node_modules..

I've made this work by importing the style.css file directly when downloading this repo's source files, but it seems Next.js doesn't like it when I import this package's compiled output which includes CSS.

Would it be possible to import your package without the CSS and be able to apply them through a separate import?

See related discussion over at next.js: vercel/next.js#27953 (comment)

hbatalhaStch commented

Could you download the npm package: https://www.npmjs.com/package/react-big-scheduler-stch

I'm getting the following error Global CSS cannot be imported from within node_modules.

I've made this work by importing the style.css file directly when downloading this repo's source files, but it seems Next.js doesn't like it when I import this package's compiled output which includes CSS.

Would it be possible to import your package without the CSS and be able to apply them through a separate import?

How are you building the package? Are you using the build script (npm run build)?

I am also using Next.js and what I do is just run the build script and get the output from within the lib folder and use it, the style.css and called directly from index.js, no need to import it from nextjs code.

I am not sure how you set up everything. In case you don't opt for downloading this package from npm and want to build it yourself and use it, could you share some code so I can see how you are using it and more details about your setup (e.g. your project structure)?

asyndesis commented

Just wanted to say thanks on opening this PR, @hbatalhaStch .

Next.js doesn't like modules that have css being imported directly:

import 'react-big-calendar/lib/css/react-big-calendar.css';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
import { Calendar, momentLocalizer, Views, Navigate } from 'react-big-calendar';

Next.js SSR doesn't like the window object:

It's still possible to import with Next.js (SSR enabled), but it feels messy:

import dynamic from 'next/dynamic';
const {
  default: Scheduler,
  SchedulerData,
  ViewType,
  DATE_FORMAT,
} = dynamic(() => import('react-big-scheduler-stch').then((module) => module), {
  ssr: false,
});

Maybe we can add this check before we try to bind the resize events:

// make sure your function is being called in client side only
if (typeof window !== 'undefined') {
  // detect window screen width function
}

I could implement these fixes in a PR. (Would prevent me from doing my own fork.) Would you like me to open a PR for each?

hbatalhaStch commented

@asyndesis Hi, thanks for the comment.

Next.js doesn't like modules that have css being imported directly:

I am using Next.js as well and the fact that I am using next-global-css package to overcome this issue made me overlook it , I am sorry.

next-global-css usage in next.config.js BTW:

/** @type {import('next').NextConfig} */
const { patchWebpackConfig } = require('next-global-css');

const nextConfig = {
  compiler: {
    styledComponents: true
  },
  reactStrictMode: true,
  webpack: (config, options) => {
    patchWebpackConfig(config, options);

    return config;
  },
}

module.exports = nextConfig

Anyway I will merge your PR about this and release a patch, thank you.

Maybe we can add this check before we try to bind the resize events:

I think I actually solved this issue (722cf35). I am not importing it dynamically anymore in Next.js.
I just released a new version, can you check if you can import it directly and let me know please

  • 🎉1