debugging - Failed to open eval code with webpack and Edge

Question

I'm not well versed with webpack and have been running into this problem that makes debugging very difficult: When an error occurs, the line that caused the error doesn't appear. Instead, the debugger simply outputs Failed to open eval code (301).

I'm working on an Office add-in with office-js, and using webpack to build for production, as well as running the dev server locally.

Below is my webpack.dev.config. It's mostly a mish-mash of examples and suggestions I found online, so there probably are many errors and room for improvement:

const path = require('path')
const HtmlWebPackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
    mode: 'development',
    entry: ['react-hot-loader/patch', './src/js/index.js'],
    output: {
      path: path.join(__dirname, 'dist'),
      publicPath: '/',
      filename: '[name].js'
    },
    target: 'web',
    devtool: 'eval',
    resolve: {
      extensions: ['.html', '.js']
    },
    node: {
      fs: 'empty',
    },
    optimization: {
      minimize: false
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3000
      },
    module: {
      rules: [
        {
          test: /.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
        {
          // Loads the javacript into html template provided.
          // Entry point is set below in HtmlWebPackPlugin in Plugins
          test: /.html$/,
          use: [
            {
              loader: "html-loader",
              //options: { minimize: true }
            }
          ]
        },
        {
          test: /.css$/,
          use: [ 'style-loader', 'css-loader' ]
        },
        {
         test: /.(png|svg|jpg|gif)$/,
         use: ['file-loader']
        }
      ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
        template: "./src/html/index.html",
        filename: "./index.html",
        excludeChunks: [ 'server' ]
      })
    ]
  };

And this is a screenshot of the Edge debugger (Office addins are run on an Edge instance inside the Office application):

Any help, suggestions and corrections are very much appreciated. Thanks in advance.

question from:https://stackoverflow.com/questions/65830181/failed-to-open-eval-code-with-webpack-and-edge

Answer 1

Waitting for answers