Errors in entry files aren't displayed properly in the browser

[tgrajewski]

• This is a bug
• This is a modification request

Code

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'source-map',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: [
      {
        directory: 'dist'
      }
    ]
  }
};

// src/index.js
'use strict';

console.logz('Hello World!');  // Intentional typo

Please paste the results of webpack-cli info here, and mention other relevant information

asset main.js 256 bytes [emitted] (name: main) 1 related asset
./src/index.js 45 bytes [built] [code generated]
webpack 5.43.0 compiled successfully in 68 ms

Expected Behavior

This is how error is displayed with only Webpack, properly showing source of the index.js module:

Actual Behavior

This is how error is displayed with Webpack Dev Server:

For Bugs; How can we reproduce the behavior?

Having a typo in an entry file or any file imported by it should be enough to trigger this issue. Used packages:

• webpack v5.43.0
• webpack-cli v4.7.2
• webpack-dev-server v4.0.0-beta.3

For Features; What is the motivation and/or use-case for the feature?

[alexander-akait]

Expected, I don't see any problems here

[tgrajewski]

How it is expected, I don't understand?

[tgrajewski]

From the readme file:

Use webpack with a development server that provides live reloading. This should be used for development only.

So how developers should work with this development server if it isn't capable of showing errors in the dev tools properly?

[alexander-akait]

This is how JS works, we need to put your code in function(s) to handle this as bundle for hot and live reload, so we can't be on the same location

[tgrajewski]

So it's not expected, but rather not possible to fix?

[alexander-akait]

It is expected because live and hot reload will not work without this code, it is limitations

[tgrajewski]

I'm assisting a team of developers and we're switching from Browserify to Webpack. We've previously used this simple dev server Budo, which now seems outdated. Anyway, Budo was showing properly runtime errors in entry files, so it's possible. And it has live reloading, but not HMR. I don't know about the internals, but what are the options here, is it a matter of some Webpack config options, e.g. disabling hot reload maybe?

[alexander-akait]

No options for this, sorry, maybe in future we will implement non bundled mode and it will be possible in some cases, but it is other issue and already tracked

[tgrajewski]

Are you sure? If an error occurs later, after the initial entry files processing, dev tools show it properly. Can you tell me more about this bundled mode, so I could investigate it on my own? Thanks

[alexander-akait]

webpack require runtime to working in browser (not only browser) when you bundle modules in one/two/more files, so we need to add own functions and so you have other location, bundless mode means do not bundle code and output as is, but it will work only for ECMA modules and in modern browser, but it will be in future

[tgrajewski]

Yeah, I know the basics of bundling, but thanks for the explanation. I think it's possible to show the error properly when code is bundled, it might be something with source maps then, as the Budo server also bundled code and still displayed errors properly.

[alexander-akait]

webpack-dev-server don't touch your source maps, maybe something with publicPath, can you provide example how you test it?

[tgrajewski]

I've setup minimal example that showcases this issue: https://github.com/tgrajewski/webpack_error_test

If you run it with the browser dev tools open the exception would be shown as originating from the bootstrap file, not where it was originally.

The source map seems fine.