Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

False negative for "Global CSS cannot be imported from within node_modules" warning

See original GitHub issue

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:25 PDT 2022; root:xnu-8020.140.41~1/RELEASE_X86_64
Binaries:
  Node: 14.19.3
  npm: 6.14.17
  Yarn: 1.22.15
  pnpm: 6.11.0
Relevant packages:
  next: 12.2.5-canary.5
  eslint-config-next: 12.2.4
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

n/a

How are you deploying your application? (if relevant)

n/a

Describe the Bug

Our components library (https://github.com/cloudscape-design/components) exports scoped styles, but we still get the warning:

./node_modules/@cloudscape-design/components/app-layout/content-wrapper/styles.scoped.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@cloudscape-design/components/app-layout/content-wrapper/styles.css.js

We use zero-config CSS scoping (e.g. the files published on npm are already scoped), but next.js still claims we are doing something wrong (do we?)

Expected Behavior

The project starts successfully with the default next config

Link to reproduction

https://github.com/just-boris/cloudscape-nextjs

To Reproduce

Currently next.config.js contains a workaround: https://github.com/just-boris/cloudscape-nextjs/blob/main/next.config.js#L8

To reproduce the issue, you need to replace module.exports = withTM(nextConfig); with module.exports = nextConfig;

Issue Analytics

State:
Created a year ago
Reactions:8
Comments:7 (1 by maintainers)

Top GitHub Comments

4reactions

derreck503commented, Aug 17, 2022

🚨 Bumping up this bug 🐛

2reactions

jaywcjlovecommented, Oct 22, 2022

https://github.com/uiwjs/next-remove-imports

Top Results From Across the Web

Next.js Global CSS cannot be imported from files other than ...

js stops complaining when your file has module in naming, e.g., changing import '../global-styles/main.scss'; to import '../global-styles/main.

global css cannot be imported from within node_modules ...

ts import "/node_modules/primeng/resources/primeng.css"; they are thrown out by webpack because sideEffects is set to "false" in primeng/package.json. When they ...

Features | Vite

Rewrite the imports to valid URLs like /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd so that the browser can import them properly. Dependencies are Strongly ...

Configuring Vitest

To configure vitest itself, add test property in your Vite config. ... imports inside externalized packages (by default, node_modules ).

Global CSS cannot be imported from within node_modules

Global CSS cannot be imported from within node_modules. 2022.03.21 ./node_modules/antd-mobile/es/components/action-sheet/action-sheet.css Global CSS cannot ...