Cannot read property 'createSnapshot' of undefined - node.js

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:
> datapack-planet#0.0.0 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! datapack-planet#0.0.0 start: `electron-forge start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the datapack-planet#0.0.0 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!

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 :)

Answer 5

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