diff --git a/errors/css-npm.md b/errors/css-npm.md new file mode 100644 index 000000000000..3e4e81f834a7 --- /dev/null +++ b/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... diff --git a/packages/next/build/webpack/config/blocks/css/messages.ts b/packages/next/build/webpack/config/blocks/css/messages.ts index 04fb623d3df5..dc5a2b0ed4a9 100644 --- a/packages/next/build/webpack/config/blocks/css/messages.ts +++ b/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() {