How to enable source map in webpack so that debugger shows exact error line in original file

When using React in a development environment, you want to ensure that your build setup provides useful debugging information, such as source maps. Source maps help map the compiled/bundled code back to the original source code, making it easier to debug errors.

Here’s how you can set up your React project to use source maps so that the browser shows the original files where the error occurred:

Setting Up Source Maps

Create React App (CRA)

If you're using Create React App (CRA), source maps are enabled by default in development mode. However, if you need to ensure they are set up correctly, you can add the following configuration in your package.json:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

CRA already handles source maps in development mode, so you don't need to do anything extra.

Custom Webpack Configuration

If you're using a custom Webpack configuration, you need to ensure that the devtool property is set appropriately to generate source maps.

Example webpack.config.js for development:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map', // This enables source maps
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

Verifying Source Maps in the Browser

1. Open Developer Tools: Open your browser’s developer tools (F12 or right-click and select "Inspect").

2. Source Tab: Navigate to the "Sources" tab in the developer tools. You should see a directory structure that mimics your original source code.

3. Errors and Breakpoints: When an error occurs, the stack trace should now point to the original source file instead of the bundled code. Similarly, when setting breakpoints, you can set them in your original source files.

Example of Debugging an Error

Suppose you have the following component in src/App.js:

import React from 'react';

function App() {
  const handleClick = () => {
    throw new Error('Something went wrong!');
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1 onClick={handleClick}>Hello World</h1>
      </header>
    </div>
  );
}

export default App;

If an error occurs when you click the header, you should see the error in the console pointing to the exact line in src/App.js rather than a bundled file like bundle.js.