Global CSS cannot be imported from within node_modules.

I got this error after installing this package:

Failed to compile
./node_modules/tippy.js/animations/scale.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-wordcloud/dist/index.module.js #

Not quite sure how to fix it. Can you please help taking a look?

Thank you for the work!

[chrisrzhou]

Hey guys, this issue seems specific to next. Although, ideally I should decouple the CSS from the JS package and have users explicitly import the CSS file. However, since the version has been shipped with included CSS in the past, I want to avoid introducing breaking changes just because of this.

I’ve never used next but after 30min of digging, I found out how to fix this thanks to your repro @xiqi. Here’s the fix:

• Issue: https://github.com/aws-amplify/amplify-js/issues/3854#issuecomment-554200567

The next.config.js that fixes it is:

const withCSS = require('@zeit/next-css');

global.navigator = () => null;

if (typeof require !== 'undefined') {
  require.extensions['.less'] = () => {};
  require.extensions['.css'] = file => {};
}

module.exports = withCSS({});

It seems that the person who filed the issue has asked for more formal support of CSS by default in an RFC, but hopefully this is a short-term fix for next-related builds. Let me know if the issue persists and reopen the issue.

[bfeister]

Actually, I take that back, it’s broken for me @chrisrzhou… Works when I run NODE_ENV=development next dev -p 8025 but breaks when I run next build, same as what @suino reported above ☝️