webpack running with different errors on npm install

Issue

when I run npm install or npm ci that seems to trigger a webpack build which produces tons of incorrect errors. All of them referring to not found dependencies which are definitely there. In addition, npm ci seems to trigger even more of these errors than npm install does.

When I run webpack build, the build runs just fine however. I am quite surprised by that behaviour as I don't seem to find any documentation on what's triggering this webpack run.

I'd like to better understand:

• what triggers webpack during npm install? (I would very much just like that to install dependencies)
• why does it show all these weird error messages?

I have installed:

• WSL 2 (Ubuntu 21.04) on Windows 11
• NPM 7.5.2
• Webpack ^5.65.0

Sample error output looks like this:

matthias@daiquiri:~/dev/hamster-books$ npm ci
asset main.js 42.9 KiB [emitted] (name: main)
asset index.html 2.91 KiB [emitted]
cached modules 3.96 KiB [cached] 4 modules
code generated modules 9.58 KiB [code generated]
  modules by path ./app/js/ui/ 6.5 KiB
    modules by path ./app/js/ui/*.js 1.45 KiB
      ./app/js/ui/loadingDialog.js 177 bytes [code generated]
      ./app/js/ui/ui.js 1.27 KiB [code generated]
    modules by path ./app/js/ui/_impl/*.js 5.05 KiB
      ./app/js/ui/_impl/createElement.js 480 bytes [code generated]
      ./app/js/ui/_impl/uiElementFactory.js 4.59 KiB [code generated]
  modules by path ./app/js/*.js 3.08 KiB
    ./app/js/hamstersBooks.js 629 bytes [code generated]
    ./app/js/dispatcher.js 2.47 KiB [code generated]
./node_modules/xdate/src/xdate.js 19.5 KiB [built]

LOG from webpack.FileSystemInfo
<w> Managed item /home/matthias/dev/hamster-books/node_modules/html-webpack-plugin isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> Managed item /home/matthias/dev/hamster-books/node_modules/style-loader isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> Managed item /home/matthias/dev/hamster-books/node_modules/css-loader isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> Managed item /home/matthias/dev/hamster-books/node_modules/less-loader isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> Managed item /home/matthias/dev/hamster-books/node_modules/xdate isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> Managed item /home/matthias/dev/hamster-books/node_modules/ts-loader isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
+ 19 hidden lines

ERROR in ./app/js/dispatcher.js 2:32-75
Module not found: Error: Can't resolve 'ts-loader' in '/home/matthias/dev/hamster-books'
 @ ./app/js/hamstersBooks.js 1:17-40

ERROR in ./app/js/dispatcher.js 3:40-69
Module not found: Error: Can't resolve 'ts-loader' in '/home/matthias/dev/hamster-books'
 @ ./app/js/hamstersBooks.js 1:17-40

ERROR in ./app/js/dispatcher.js 4:34-81
Module not found: Error: Can't resolve 'ts-loader' in '/home/matthias/dev/hamster-books'
 @ ./app/js/hamstersBooks.js 1:17-40

The output continues for a while after that, it's also repeating, trying to run webpack several times.I also checked - all these directories and files that are being referenced exist. It turns out some of them are coming from node_modules while other ones are just regular project references

Solution

Wipe node_modules and reinstall. The reason for doing so is basically what @Harshal Patil comment is all about, i.e. conflicts after packages trigger their install/postinstall scripts.

(This was the suggestion made in my comment, which solved the problem, now as answer so that it might be helpful for someone else with a similar issue)

Answered By - Johnny