Uncaught TypeError: __webpack_require__.e is not a function-CodePudding

I get the error Uncaught TypeError: __webpack_require__.e is not a function when loading my Chrome extension. The error is triggered when loading the background.js script.

/******/    /* webpack/runtime/eagerly load chunks */
/******/    (() => {
/******/        __webpack_require__.e(352) //Error trigged at this line.
/******/    })();

Their is already a question on this topic. I am not sure how to apply the proposed solution. Do I need to create a cache group for all dependencies?

Also, how do I know which modules is being imported? (module ref 352)

Source Code

package.json

...
  "devDependencies": {
    "copy-webpack-plugin": "^11.0.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.8.3",
    "vue-template-compiler": "^2.6.11",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3",
    "webpack-target-webextension": "^1.0.3"
  }
...

webpack.config.js

const WebExtension = require('webpack-target-webextension');
const CopyPlugin = require("copy-webpack-plugin");

const webpack = require('webpack');
const path = require('path');

/** @type {webpack.Configuration} */
const config = {
  // No eval allowed in MV3
  devtool: 'cheap-source-map',
  entry: {
    background: path.join(__dirname, './src/background.js'),
    /*options: path.join(__dirname, './src/options.js'),
    popup:  path.join(__dirname, './src/popup.js'),*/
  },
  optimization: {
    minimize: false,
  },
  output: {
    path: path.join(__dirname, './dist'),
    // Our assets are emitted in /dist folder of our web extension.
    publicPath: '/dist/',
  },
  resolve: {
    alias: {
      core: path.join(__dirname, 'background'),
    },
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "./src/manifest.json"},
        {
          from: "src/*.html",
          to({ context, absoluteFilename }) {
            return "./[name][ext]";
          },
        }
      ],
    }),
    new WebExtension({
      background: {
        entry: 'background',
        manifest: 3,
        weakRuntimeCheck: true,
      },
    }),
  ],
  // Add devServer.hot = true or "only" to enable HMR.
  devServer: {
    hot: 'only',
  },
}
module.exports = config

My code project is available here: https://github.com/h3xstream/test-extension

npm install
npm run build

CodePudding user response：

Looks like the issue is sticking with package webpack-target-webextension itself. I quickly checked its repo and apparently there's an opening issue on the repo which suggests you to have a dynamic import in your file as a hackaround way. But looks like there's another way to fix that by turning off eagerChunkLoading:

new WebExtension({
  background: {
    // ...
    eagerChunkLoading: false,
  },
}),