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.

Alejandroalejo

Answer 1

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.

Sculptress

I'm getting this on a completely new install via npx create-electron-app electron --template=webpack and these instructions are not fixing things – Morphophonemics

Answer 2

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

Morphophonemics

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!

Lueck

The link has info on a fix that still uses npm, for others interested. That helped me out. – Kriskrischer

Answer 4

its due to mismatch of your webpack versions, just check npm list webpack, you will be able to see something like unmet dependecies.Just create peerDependencies and add webpack into it or can remove webpack inteself.Check your ts-loader version too,it should be less than 9.see the magic :)

Mightily

Answer 5

run npm install or yarn inside the project, to install project's dependencies

Archival

honestly am not sure why am downvoted 4 times, I had a similar issue and that worked for me and I shared my solution, as simple and obvious as it looks this solved my problem and I was expecting it to solve his – Archival