Add code context and suggestions to error messages for better debugging experience

[asadjan4611]

Feature Proposal

Add code snippets and helpful suggestions to webpack error messages to make debugging easier. When an error occurs, show:

• The actual code around the error (3-5 lines)
• A visual indicator pointing to the exact error location
• Suggestions on how to fix the error
• Links to relevant documentation

Current behavior:

ERROR in ./src/index.js:15:8
Module parse failed: Unexpected token (15:8)
You may need an appropriate loader to handle this file type.

Proposed behavior:

ERROR in ./src/index.js:15:8

13 | import { Component } from 'react';
14 | 
15 | const App = () => {
     ^
    | 
16 |   return <div>Hello</div>;
17 | };

Module parse failed: Unexpected token (15:8)
You may need an appropriate loader to handle this file type.

💡 Suggestion: Add babel-loader to process JSX files

  module: {
    rules: [{
      test: /\.jsx?$/,
      use: 'babel-loader'
    }]
  }

📖 Learn more: https://webpack.js.org/loaders/babel-loader/

Feature Use Case

Problem: When developers get webpack errors, they only see file path and line number. They have to:

• Open the file manually
• Find the error line
• Research how to fix it
• This wastes 15-30 minutes per error

Solution: Show code context directly in the error message so developers can:

• See the problematic code immediately
• Understand what's wrong
• Get suggestions on how to fix it
• Copy configuration examples

Real-world scenarios:

1. New developer joins a project:

   • Runs build, gets parse error
   • Sees code snippet and suggestion
   • Fixes it in 2 minutes instead of 20 minutes

2. Large codebase with 500+ files:

   • Error in ./src/utils/helpers/validation.js:142:8
   • Don't need to open file - code visible in error
   • Saves navigation time

3. Common loader errors:

   • Missing CSS loader? See suggestion with config
   • Missing babel-loader? See suggestion with config
   • No more searching documentation

Impact:

• Saves 10-25 minutes per error
• Better onboarding for new developers
• Fewer support questions
• Makes webpack more user-friendly

Additional Context

Current Error Examples

Example 1: Module Parse Error

ERROR in ./src/components/App.jsx:12:5
Module parse failed: Unexpected token (12:5)
You may need an appropriate loader to handle this file type.

Problem: No code shown, no suggestion about which loader to use.

Example 2: Missing Module

ERROR in ./src/index.js:3:0
Module not found: Error: Can't resolve './utils/helper' in '/project/src'

Problem: No code snippet showing the import, no suggestions about common fixes.

Example 3: CSS Loader Error

ERROR in ./src/styles.css:1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Problem: No suggestion about css-loader, no configuration example.

Comparison with Other Tools

TypeScript shows:

src/index.ts:15:8 - error TS2304: Cannot find name 'Component'.

15 const App: Component = () => {
         ^

ESLint shows:

./src/index.js
  15:8  error  'Component' is not defined  no-undef

  13 | import { Component } from 'react';
  14 | 
> 15 | const App: Component = () => {
     |        ^
  16 |   return <div>Hello</div>;
  17 | };

Webpack currently shows:

ERROR in ./src/index.js:15:8
Module parse failed: Unexpected token (15:8)

Observation: Other modern tools show code context, webpack doesn't.

Workarounds (Current Solutions)

1. Use external plugins:

   • friendly-errors-webpack-plugin (community plugin)
   • error-overlay-webpack-plugin
   • Problem: Requires extra dependencies, not built-in

2. Manual investigation:

   • Open file in editor
   • Find error line
   • Search online for solutions
   • Problem: Time-consuming, requires webpack knowledge

Implementation Notes

• Performance: Minimal impact (files already in memory during compilation)
• Security: Respect stats.errorDetails setting, allow disabling via config
• Priority errors: Start with most common (parse errors, missing modules, loader errors)
• Backward compatible: Fully additive, no breaking changes

Benefits

For developers:

• Faster debugging
• Better onboarding
• Less frustration

For maintainers:

• Fewer support questions
• Better issue reports
• Improved webpack reputation

For ecosystem:

• Lower barrier to entry
• Better developer experience
• Aligns with modern tooling standards

[alexander-akait]

PR welcome, moved to ideas because AI generated

[asadjan4611]

Can you assign this issue to me ?

[alexander-akait]

PR welcome, we are open source, no need to assign