Having a file extension of JPG instead of JPEG (and vice versa) causes cryptic Webpack error (Error: write EPIPE)

https://github.com/cyrilwanner/next-optimized-images/blob/756bb958e91a0fdb4e51c8185733df224cda0678/lib/loaders/index.js#L80

If an image has the file extension of .jpg when it should be .jpeg, Webpack throws an incredibly cryptic error. To try this, take any .jpeg file, rename it with the .jpg extension, and try to run this package. You’ll get a “write EPIPE” error, and a call stack that merely indicates that the problem is somehow related to this package.

I imagine that the issue goes deeper, with imagemin-mozjpeg, as next-optimized-images seems to handle jpg and jpeg files the same way. That is the bug. They should not be handled the same way, and the error should be thrown if a file has the wrong extension.

Here is a sample image file if you want to reproduce this.

Here’s an example error stack: `

EnvironmentPlugin - undefined environment variable is undefined.

03:16:54 PM | You can pass an object with default values to suppress this warning. 03:16:54 PM | See https://webpack.js.org/plugins/environment-plugin for example. 03:16:54 PM | ./pages/leadership/photos/ari-mendelow.jpg 03:16:54 PM | Error: write EPIPE 03:16:54 PM | EnvironmentPlugin - undefined environment variable is undefined. 03:16:54 PM | You can pass an object with default values to suppress this warning. 03:16:54 PM | See https://webpack.js.org/plugins/environment-plugin for example. 03:16:54 PM | ./pages/leadership/photos/ari-mendelow.jpg 03:16:54 PM | Error: write EPIPE 03:16:54 PM | Automatically optimizing pages… 03:16:55 PM | router.query: {} 03:16:55 PM | data: undefined 03:16:55 PM | router.query: {} 03:16:55 PM | router.query: {} 03:16:55 PM | router.query: {} 03:16:55 PM | data: undefined 03:16:55 PM | Error: Module build failed (from ./node_modules/img-loader/index.js): 03:16:55 PM | Error: write EPIPE 03:16:55 PM | at WriteWrap.afterWrite [as oncomplete] (net.js:789:14) 03:16:55 PM | at Object.6tA3 (/zeit/d16e389/.next/serverless/pages/leadership.js:519:7) 03:16:55 PM | at webpack_require (/zeit/d16e389/.next/serverless/pages/leadership.js:23:31) 03:16:55 PM | at webpackContext (/zeit/d16e389/.next/serverless/pages/leadership.js:1661:9) 03:16:55 PM | at Leadership.keys_default.map.leaderKey (/zeit/d16e389/.next/serverless/pages/leadership.js:5820:39) 03:16:55 PM | at Array.map (<anonymous>) 03:16:55 PM | at Leadership (/zeit/d16e389/.next/serverless/pages/leadership.js:5807:64) 03:16:55 PM | at d (/zeit/d16e389/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:498) 03:16:55 PM | at Za (/zeit/d16e389/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16) 03:16:55 PM | at a.b.render (/zeit/d16e389/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476) 03:16:55 PM | at a.b.read (/zeit/d16e389/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18) 03:16:55 PM | Error occurred prerendering page “/leadership” https://err.sh/zeit/next.js/prerender-error: Error: Failed to render serverless page 03:16:55 PM | at Object._default [as default] (/zeit/d16e389/node_modules/next/dist/export/worker.js:12:212) 03:16:55 PM | loading… 03:16:55 PM | loading… 03:16:55 PM | loading… 03:16:55 PM | > Build error occurred 03:16:55 PM | Error: Export encountered errors 03:16:55 PM | at _default (/zeit/d16e389/node_modules/next/dist/export/index.js:19:788) 03:16:55 PM | at process._tickCallback (internal/process/next_tick.js:68:7) 03:16:55 PM | npm ERR! code ELIFECYCLE 03:16:55 PM | npm ERR! errno 1 03:16:55 PM | npm ERR! ame-website@1.0.0 build: next build 03:16:55 PM | npm ERR! Exit status 1 03:16:55 PM | npm ERR! 03:16:55 PM | npm ERR! Failed at the ame-website@1.0.0 build script. 03:16:55 PM | npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 03:16:55 PM | npm ERR! A complete log of this run can be found in: 03:16:55 PM | npm ERR! /zeit/.npm/_logs/2020-01-13T23_16_55_499Z-debug.log 03:16:55 PM | Error: Exited with 1 03:16:55 PM | at ChildProcess.child.on (/zeit/83f001be910e94ef/.build-utils/.builder/node_modules/@now/next/dist/index.js:47050:24) 03:16:55 PM | at emitTwo (events.js:126:13) 03:16:55 PM | at ChildProcess.emit (events.js:214:7) 03:16:55 PM | at maybeClose (internal/child_process.js:925:16) 03:16:55 PM | at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5) 03:16:55 PM | worker exited with code 20 and signal null 03:16:58 PM | done

`

[cyrilwanner]

I had a similar error regarding EPIPEs too, although the error message was not the same. The fix that worked for me was I directly published it from my own laptop via vercel-cli as the vercel website’s build was causing this error. I’m not really sure of the details why that worked but I got a hint of that since my local build was working fine.

That problem should be solved in the canary version as image optimization is moved to WebAssembly there and so it works exactly the same in every environment. If some of you still experience those issues, I recommend switching to canary as that solves a lot of the current problems. And it will move out of canary soon anyway.

[sundoufu]

@cyrilwanner I found it works on v2.6.2, which is stable. Can you check it out and close this issue as resolved?