Global CSS cannot be imported from within node_modules.

[LuuukDotDev]

The library does not work with next.js, because styles are incorrectly imported. See: https://nextjs.org/docs/messages/css-npm

[codemonkey800]

This can be fixed by either bundling the CSS into the JS, or if we make users import the CSS directly.

[Salemoche]

This can be fixed by either bundling the CSS into the JS, or if we make users import the CSS directly.

@codemonkey800 How would I do that?

[ytakayanagi]

I'll leave this comment if anyone is struggling with the error. I've tested my method in Next.js version 11 and it works.

1. Install "next-transpile-modules" and "@babel/preset-react"

# yarn
yarn add next-transpile-modules @babel/preset-react

# npm
npm i next-transpile-modules @babel/preset-react

2. Create or modify your next.config.js

const withTM = require("next-transpile-modules")([
  "@ericz1803/react-google-calendar"
])

module.exports = withTM({
  // existing custom config
});

3. Import CSS in "_app.js" or "_app.tsx" file

import'@ericz1803/react-google-calendar/index.css'

[garv-shah]

@ytakayanagi Thank you so much for the fix! For me it seemed to be a step forward, since the page actually started rendering, but the formatting is very broken, and looks like this:

Any idea what could be causing this?

[ytakayanagi]

@garv-shah Glad, you got it to work! From the looks, the style is the only thing that needs to be fixed for you. Did you add: import'@ericz1803/react-google-calendar/index.css' You can add this import directly to the component that is displaying the calendar.

[garv-shah]

Yup, the import statement is there, but it doesn't seem to make a difference, in fact it looks the same if I have it there or remove it :/

[breezyfasano]

I am having the same issue with NextJS! Edit: This worked for me, thanks so much.