Cannot read property 'createSnapshot' of undefined

Question

Since I used Electron forge webpack plugin, when I execute npm start, it will cause an error after step Compiling Preload Scripts. It says the error is inside Forge.
I check it out, it's an error in file watcher api, that mainCompilation.fileSystemInfo is undefined, so it cannot read prop createSnapShot function.

What should I do to resolve this error and start my app?

Logs:

> [email protected] start D:\program\datapack-planet
> electron-forge start

√ Checking your system
√ Locating Application
You have set packagerConfig.ignore, the Electron Forge webpack plugin normally sets this automatically.

Your packaged app may be larger than expected if you dont ignore everything other than the '.webpack' folder
√ Preparing native dependencies
√ Compiling Main Process Code
√ Launch Dev Servers
√ Compiling Preload Scripts

An unhandled rejection has occurred inside Forge:
TypeError: Cannot read property 'createSnapshot' of undefined
    at D:\program\datapack-planet\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (D:\program\datapack-planet\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:12:10)
    at D:\program\datapack-planet\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:219:35
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Electron Forge was terminated. Location:
{}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `electron-forge start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\dell\AppData\Roaming\npm-cache\_logs\2021-01-22T04_33_47_591Z-debug.log

My package.json (NOT ALL, ONLY IMPORTANT DATA):

{
  "main": "./.webpack/main",
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.54",
    "@electron-forge/maker-deb": "^6.0.0-beta.54",
    "@electron-forge/maker-rpm": "^6.0.0-beta.54",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.54",
    "@electron-forge/maker-zip": "^6.0.0-beta.54",
    "@electron-forge/plugin-webpack": "^6.0.0-beta.54",
    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
    "@types/jquery": "^3.5.5",
    "@types/node": "^14.14.22",
    "electron": "^11.1.1",
    "fork-ts-checker-webpack-plugin": "^6.1.0",
    "html-loader": "^1.3.2",
    "jquery": "^3.5.1",
    "less": "^4.1.0",
    "less-loader": "^7.2.1",
    "node-loader": "^1.0.2",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "webpack": "^5.16.0",
    "webpack-cli": "^4.4.0"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "jquery": "^3.5.1"
  },
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "config": {
    "forge": {
      "packagerConfig": {
        "ignore": [
          "\\.(idea|git)",
          "config\\.json",
          "[A-Z]",
          "md$"
        ]
      },
      "makers": [
        // There is some auto-generated settings, I didn't changed it.
        // So I skip those configs.
      ],
      "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"
                }
              ]
            }
          }
        ]
      ]
    }
  }
}

Resolve: I restart the project. Maybe I missed some dependencies. I am copying from the template, so the bug may should be occurred as expected.

Answer 1

My work around was to remove node_modules and package-lock.json, and then run

npm install --legacy-peer-deps

There is an issue with very modern versions of npm and this gives you the legacy install rules which seem to work

Answer 2

I had the same issue which was resolved after checking and correcting the installed versions.

• Run npm ls webpack to show the peer dependencies missing. This will help you figure out the right version required in your app.

• Change to required version, save the package.json file.

• Delete both package-lock.json and the node_modules folder.

• Run npm install.

Run the script again.

Answer 3

I had this same issue and it seemed to be a compatibility issue with npm7 and plugin-webpack.

There are a few solutions, but the easiest for me was to simply use yarn instead of npm.

• delete node_modules/
• delete package-lock.json
• run yarn install
• run yarn start

This worked for me, let me know if this helps!