What is this Electron Forge ERROR in Electron's template (Typescript + Webpack)?

Question

I installed Electron's template following Electron Forge page.

npx create-electron-app my-new-app --template=typescript-webpack

After that, I run

npm run start

insides my-new-app folder and the following error message were popped up in command window

$ npm run start

> my-new-app@1.0.0 start
> electron-forge start

✔ Checking your system
✔ Locating Application

An unhandled rejection has occurred inside Forge:
Error: Expected plugin to either be a plugin instance or a { name, config } object but found @electron-forge/plugin-webpack,[object Object]

Electron Forge was terminated. Location:
{}

I Google it, but no one encoutered same error. I could use above template without error message before a week ago. So, I copy the project that were made a week ago and run. It was success. However, I run the following command

npm audit

There are 22 vulnerabilities (3 moderate, 19 high). Errors are

got  <11.8.5 
Severity: moderate

and

minimatch  <3.0.5
Severity: high

It could not fix by npm audit fix and npm audit fix --force. So, I fixed this error by rewriting package.json and package-lock.json. Then I deleate node_modules folder and run npm install. These vulnerabilities are gone, but above my problem were again after I run npm run start.

I think problem is involved in @electron-forge/plugin-webpack. However, I dont know how to fix it.

Thanks in advance.

Answer 1

The plugins field, under config.forge options in package.json, were generated in the following strucure:

"plugins": [
  [
    "@electron-forge/plugin-webpack",
    {
      "mainConfig": "./webpack.main.config.js",
      "renderer": {
        "config": "./webpack.renderer.config.js",
        "entryPoints": [
          {
            "html": "./src/index.html",
            "js": "./src/renderer.ts",
            "name": "main_window",
            "preload": {
              "js": "./src/preload.ts"
            }
          }
        ]
      }
    }
  ]
]

Change that structure to an object with name and config fields:

"plugins": [
  {
    "name": "@electron-forge/plugin-webpack",
    "config": {
      "mainConfig": "./webpack.main.config.js",
      "renderer": {
        "config": "./webpack.renderer.config.js",
        "entryPoints": [
          {
            "html": "./src/index.html",
            "js": "./src/renderer.ts",
            "name": "main_window",
            "preload": {
              "js": "./src/preload.ts"
            }
          }
        ]
      }
    }
  }
]