"Global CSS cannot be imported from within node_modules." - next.js

Reduced Test Case

next.js example repo - https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/next

Bug Description

I try to use FullCalendar with next.js, so I tried the FullCalendar next.js example repo.

After installing I stumbled on a global css error (Global CSS cannot be imported from within node_modules.) and found out that this CSS issue was the reason for this example repo at all.

Sadly the repo don’t work anymore and produces the same error (again).

https://github.com/fullcalendar/fullcalendar/issues/5393#issuecomment-667701320

Screenshots

Maybe someone has an idea, thank you.

[spencerwmiles]

I’ve got a solution for this.

I use Tailwind for my CSS needs so all of the styles being imported by FC were undesirable to me. The trick is actually to stub out the CSS import via webpack config.

in next.config.js

{ webpack: (config) { config.resolve.alias[“./main.css”] = false; return config; } }

It’s a little dirty, so your mileage may vary depending on the size/complexity of your application… This will stub out the CSS imports being made by FullCalendar and get your imports to work.

Then in theory, if you need the FC styles, you should just be able to import the stylesheets on a case-by-case basis manually in _app.jsx or however you like.

Alternatively, follow the documentation/example that lives inside of this repo for next.js.

The reason this error occurs is that Next.js does not allow modules to import global stylesheets. FullCalendar attempts to load stylesheets and it’s baked into the core. The documented way around this is to use “next-transpile-modules” which gets around this limitation.

See https://github.com/fullcalendar/fullcalendar-example-projects/tree/10fe58abfc94457c7582af3948b3764cd17e7960/next

[CyberCyclone]

I’m having the same issue with simply adding import FullCalendar from "@fullcalendar/react"; to my Next.js project.