Cannot import CSS from node_modules in Next.js 10.2.0

Reduced Test Case

You must paste a link to a REDUCED TEST CASE. If you do not, this issue will automatically be closed. To prevent this, include the text “not reproducible with a link” (assuming it’s true).

https://codesandbox.io/s/elastic-kilby-jdlql

Bug Description

Currently, I am using the solution provided for Next.js, using next-transpile-module and babel-plugin-transform-require-ignore. https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/next-scheduler.

I’ve been using nextjs with version 10.1.3 and with a few modifications I was able to make it work. But with the release of Next.js 10.2.0 - https://nextjs.org/blog/next-10-2. I am getting the same old error. (That I cannot import CSS from node_modules).

What do you expect to happen? The application runs correctly.

What happens instead? Build throws an error.

[pshdev1030]

this article will help you

[spencerwmiles]

I know this is a closed thread, but thought I’d chime in with my own experience and help others who may also run into this issue.

I use Tailwind for my CSS needs, so your mileage may vary depending on what your use cases are.

Using the exposed webpack config in next.config.js, I was able to just “stub out” the CSS imports entirely. Doing this was kind of a 2-for-1, I was able to reduce my CSS being shipped to the client by >50% + there is no longer a requirement to transpile the library anymore.

This has given me a clean slate and the ability to implement any FC style how I see fit without having to fight overrides, etc.

/** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, swcMinify: true, webpack: (config) => { // bit of a hack to get around fullcalendar trying to import stylesheets // we do not need them so this is a good method of stubbing them out // also prevents the need to transpile them config.resolve.alias["./main.css"] = false; return config; }, ...