Webpack dev server display doesn't source map my error

Question

When I run my app on webpack server (webpack serve --open --config webpack.dev.js) I am testing the error source mapping. In a file print.js I have a bug. When I open the website from the server it displays a bug

I need it to show me the exact file from the bug, not the bundle

My webpack.common.js

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

module.exports = {
  entry: {
    index: "./src/index.js",
    print: "./src/print.js",
  },
  devtool: "source-map",

  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Development",
    }),
  ],
};

My webpack dev file

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devServer: {
    static: "./dist",
    client: {
      overlay: true,
    },
  },
});

I tried clearing cache, changing mapping methods but still nothing works. It stills shows me bundle not the exact file

Lin Du · Accepted Answer · 2024-04-30 06:18:14Z

0

The unhandled runtime errors shown in the overlay can't show the source map line. See Error Overlay Shows Un-Source-Mapped Lines issue.

However, the errors in the browser console can show the source map line. But you need to enable below setting of the devtools:

Settings -> Preferences -> Sources -> JavaScript source maps

Before enabling this setting, the error in the console will show the compiled code line:

Uncaught ReferenceError: cosnole is not defined
   at HTMLButtonElement.printMe (index.bundle.js:3299:3)
printMe @ index.bundle.js:3299

After enabling this setting, reload the page. Click the button, it will show the source map line.

Uncaught ReferenceError: cosnole is not defined
    at HTMLButtonElement.printMe (print.js:2:1)
printMe @ print.js:2

When you click the print.js:2:1, you will be navigated to the file from the source map.

edited Apr 30, 2024 at 6:18

answered Apr 30, 2024 at 6:11

Lin Du

104k138 gold badges340 silver badges575 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

noontz · Accepted Answer · 2024-09-19 07:58:58Z

0

As per the answer from Lin Du this is not natively possible in webpack ATM, but there is a package error-overlay-webpack-plugin that can do what you are looking for with a couple of quirks to make it work.

Also disable the native webpack overlay or you'll have 2 overlays to shut down:

 devServer: {
        client: {
            overlay: false,
        }
    }

"📝 Click to open error line in editor" does not seem to work on my setup, but it's still a great alternative to the native overlay.

edited Sep 19, 2024 at 7:58

answered Sep 19, 2024 at 7:52

noontz

2,08726 silver badges37 bronze badges

Collectives™ on Stack Overflow

Webpack dev server display doesn't source map my error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related