Expose CSS Issuer When Error (#9850)

* Expose CSS Issuer When Error
This introduces a friendlier error for invalid CSS imports by telling you the offending file.

---

Fixes #9847

* fix test matches

packages/next/build/webpack/loaders/error-loader.ts

+import chalk from 'chalk'
 import loaderUtils from 'loader-utils'
+import path from 'path'
 import { loader } from 'webpack'
 
 const ErrorLoader: loader.Loader = function() {
@@ -6,7 +8,22 @@ const ErrorLoader: loader.Loader = function() {
 
   const { reason = 'An unknown error has occurred' } = options
 
-  const err = new Error(reason)
+  // TODO: remove this ignore -- currently an ESLint bug
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  const resource = this._module?.issuer?.resource ?? null
+  // TODO: remove this ignore -- currently an ESLint bug
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  const context = this.rootContext ?? this._compiler?.context
+
+  const issuer = resource
+    ? context
+      ? path.relative(context, resource)
+      : resource
+    : null
+
+  const err = new Error(
+    reason + (issuer ? `\nLocation: ${chalk.cyan(issuer)}` : '')
+  )
   this.emitError(err)
 }
 

packages/next/taskfile.js

@@ -51,6 +51,7 @@ const babelServerOpts = {
   ],
   plugins: [
     '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
     'babel-plugin-dynamic-import-node',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
   ],

test/integration/css-modules/test/index.test.js

@@ -178,6 +178,7 @@ describe('Invalid CSS Module Usage in node_modules', () => {
     expect(stderr).toMatch(
       /CSS Modules.*cannot.*be imported from within.*node_modules/
     )
+    expect(stderr).toMatch(/Location:.*node_modules[\\/]example[\\/]index\.mjs/)
   })
 })
 
@@ -197,6 +198,7 @@ describe('Invalid CSS Module Usage in node_modules', () => {
     expect(stderr).toMatch(
       /Global CSS.*cannot.*be imported from within.*node_modules/
     )
+    expect(stderr).toMatch(/Location:.*node_modules[\\/]example[\\/]index\.mjs/)
   })
 })
 

test/integration/css/test/index.test.js

@@ -221,6 +221,7 @@ describe('CSS Support', () => {
       expect(stderr).toMatch(
         /Please move all global CSS imports.*?pages(\/|\\)_app/
       )
+      expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
     })
   })
 
@@ -240,6 +241,7 @@ describe('CSS Support', () => {
       expect(stderr).toMatch(
         /Please move all global CSS imports.*?pages(\/|\\)_app/
       )
+      expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
     })
   })
 
@@ -257,6 +259,7 @@ describe('CSS Support', () => {
       expect(stderr).toContain('Failed to compile')
       expect(stderr).toContain('styles/global.css')
       expect(stderr).toContain('Please move all global CSS imports')
+      expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
     })
   })