docs(errors): CSS Imported by a Dependency (#10032)

errors/css-npm.md

@@ -0,0 +1,27 @@
+# CSS Imported by a Dependency
+
+#### Why This Error Occurred
+
+One of your dependencies (`node_modules`) imports a CSS file.
+
+This normally happens when a package's source files are accidentally consumed,
+instead of the built package.
+
+#### Possible Ways to Fix It
+
+Reach out to the maintainer and ask for them to publish a compiled version of
+their dependency.
+
+Compiled dependencies do not have references to CSS files, or any other files
+that require bundler-specific integrations.
+
+The dependency should also provide instructions about what CSS needs to be
+imported by you, in your application.
+
+Importing CSS files within `node_modules` cannot be supported because we cannot
+know the correct behavior:
+
+- Should the file be consumed as Global CSS or CSS Modules?
+- If Global, in what order does the file need to be injected?
+- If Modules, what are the emitted class names? As-is, camel-case, snake case?
+- Etc...

packages/next/build/webpack/config/blocks/css/messages.ts

@@ -11,10 +11,11 @@ export function getGlobalImportError(file: string | null) {
 }
 
 export function getGlobalModuleImportError() {
-  // TODO: Read more link
   return `Global CSS ${chalk.bold(
     'cannot'
-  )} be imported from within ${chalk.bold('node_modules')}.`
+  )} be imported from within ${chalk.bold(
+    'node_modules'
+  )}.\nRead more: https://err.sh/next.js/css-npm`
 }
 
 export function getLocalModuleImportError() {