CSS syntax error halts Next.js build amid unresolved next/image loader validation

Direct answer

Keep CSS syntax failures as hard blockers so they stop the build, but use Next.js’ ignoreWarnings option to filter out the low‑signal next/image loader warnings. If you also want the pending loader‑validation discussion to appear as a non‑failing notice, add a tiny webpack plugin that pushes a warning (not an error) when the validation is missing.

Confirmed facts

• In Next.js 13.x, a CSS module with invalid syntax causes webpack‑css-loader to throw an error that aborts next build. This is a hard failure by design.
• Webpack’s warning system (used by the next/image loader for domain‑validation messages) can be suppressed via the ignoreWarnings array in next.config.js without affecting hard errors.
• A custom webpack plugin can emit compilation.warnings.push(...) to surface additional notices that do not stop the build.

Likely explanation / steps for this case

1. Identify the exact warning text emitted by the next/image loader when domain validation is pending (e.g., something like Invalid next/image loader configuration: …).
2. In next.config.js, add an ignoreWarnings entry that matches that text (regex or string) so the warning is filtered out:

   // next.config.js
   module.exports = {
     webpack: (config, { isServer }) => {
       config.ignoreWarnings = [/Invalid next\\/image loader configuration:/];
       return config;
     },
   };
   

3. To surface the unresolved validation as a separate notice, create a minimal plugin (e.g., next-image-warning.js) that checks whether the loader options contain the expected domains and, if not, pushes a warning:

   // next-image-warning.js
   class NextImageWarningPlugin {
     apply(compiler) {
       compiler.hooks.compilation.tap('NextImageWarningPlugin', (compilation) => {
         compilation.hooks.processAssets.tap({
           name: 'NextImageWarningPlugin',
           stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
         }, (assets) => {
           // Replace this condition with your actual validation logic
           const missing = true; // set based on real check
           if (missing) {
             compilation.warnings.push(new Error('next/image loader validation pending (non‑fatal notice)'));
           }
         });
       });
     }
   }
   module.exports = NextImageWarningPlugin;
   

4. Add the plugin to the webpack config:

   // next.config.js (continued)
   const NextImageWarningPlugin = require('./next-image-warning');
   module.exports = {
     webpack: (config, { isServer }) => {
       config.ignoreWarnings = [/Invalid next\\/image loader configuration:/];
       config.plugins.push(new NextImageWarningPlugin());
       return config;
     },
   };
   

5. Run next build and verify:
   • A CSS syntax error still stops the build with a webpack‑css-loader message.
   • The next/image validation warning no longer appears (because it’s ignored).
   • The custom notice appears in the output but does not cause a failure.

Missing diagnostic detail

To finalize the ignoreWarnings regex, you need the exact warning string emitted by the next/image loader in your Next.js version. If the text differs, adjust the regex accordingly.