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

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

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

@spencerwmiles Thankyou so much for that solution! I have been bashing my head against the wall for almost a full day trying to get the official example working, with no luck. Your config.resolve.alias["./main.css"] = false; solution worked first try, and is so much cleaner and simpler!

I came up with a slight variation so we can be a bit more fine-grained in stubbing out only the *.css files we need to, rather than any import of ./main.css by any code in the whole app:

config.module.rules.push({
  test: /node_modules\/@fullcalendar/,
  resolve: {
    alias: {
      "./main.css": ""
    }
  }
})

Note also that in Webpack v4 we apparently can’t set a resolve to false as it needs to be a string. But it seems that setting it to an empty string does the trick!

Also i’m sure the regex in the test could probably be a bit cleaner/neater… but it seems to do the trick.

I am going to use ExportPDF function on Ckeditor in Next js but I faced with the following error

./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules@ckeditor\ckeditor5-engine\src\view\placeholder.js

If someone has best solution then please reply to my post. Thanks

I too am working with ckeditor and facing the same problem. Maybe I’ll juste leave Next.

Released in v6.0.0

I have the latest NextJS v13. 13.0.6 actually at the time of writing.

Except, it needs to {"./main.css": false} not {"./main.css", ""}

@peterbe As I said in https://github.com/fullcalendar/fullcalendar/issues/6674#issuecomment-1338902273:

Note also that in Webpack v4 we apparently can’t set a resolve to false as it needs to be a string. But it seems that setting it to an empty string does the trick!

this blocks regular CSS imports in pages/_app.tsx

That wasn’t my experience, I just imported them as normal from within my _app.tsx file and it worked as expected.

Either use this: https://spacebro.io/articles/fullcalendar-nextjs-10-higher Or patch package https://github.com/ds300/patch-package with patches.zip

The first technique broke my fast refresh.