What's the reason of this error? (MacOS11.1)

[suruirui]

[suruirui]

When I run a project by typing 'npm run build' or 'npm run dev', the console printed this error above

[Enrique Ramírez]

@suruirui I'm not sure the reason for this error, but I encounter it often lately. Here's a thread talking about it: #104 . Maybe one of the solutions there helps out?

For the sake of completeness, here's my details:

• macOS Big Sur v11.4
• node v14.13.0
• image-webpack-loader v7.0.1
• webpack v5.38.1

Issue seems to come from processing png files exclusively. I've done brew install libpng but I don't think that was ever the issue. Whenever I try to run my build, I get an error similar to this on all my PNG files:

ERROR in ./src/img/zone-3.png
Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error
    at Process.ChildProcess._handle.onexit (internal/child_process.js:268:19)
    at onErrorNT (internal/child_process.js:464:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
 @ ./src/img/ sync \.(gif|png|jpe?g|svg)$ ./zone-3.png img/zone-3.png
 @ ./src/app.js 1:117-171

And, at the end of the list of errors for every png file, this error shows up:

ERROR in ./src/css/style.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error
    at Process.ChildProcess._handle.onexit (internal/child_process.js:268:19)
    at onErrorNT (internal/child_process.js:464:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
    at processResult (/node_modules/webpack/lib/NormalModule.js:703:19)
    at /node_modules/webpack/lib/NormalModule.js:809:5
    at //node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /node_modules/image-webpack-loader/index.js:93:9
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ ./src/app.js 1:0-22

I'm not sure WHAT triggers this, but I suspect is whenever my package.json changes even if it doesn't really involve image-webpack-loader, things start to fail.

The only solution that works for me is to constantly run:

npm ci
npm rebuild

until it starts working again. Sometimes it takes one shot. Sometimes it takes multiple. It's annoyingly slow, and npm rebuild by itself has never worked for me, I've had to pair it with npm ci.

Not sure what's going on, but I hope the above information helps someone.