search

cyrilwanner / next-optimized-images

🌅 next-optimized-images automatically optimizes images used in next.js projects (jpeg, png, svg, webp and gif).
MIT License
2.21k stars 92 forks source link

Plugin doesn't work with webpack 5 / Next.js 11 #251

Open mtlewis opened 3 years ago

mtlewis commented 3 years ago

Thanks a lot for this excellent plugin, it's been really helpful for us!

Problem

This plugin doesn't work correctly when using Next.js 11. Attempts to require images result in an error like the one below during the build:

Failed to compile.

./src/images/my-awesome-image.svg
TypeError: unsupported file type: undefined (file: undefined)

Workaround

It seems like the problem is due to the fact that from version 11 Next.js uses Webpack 5 by default. It looks like it's possible to work around this issue by forcing the use of Webpack 4. This is done by setting webpack5 to false in next.config.js - see the webpack5 option docs for more.

Edit: rather than disabling webpack5, this can be solved more neatly by toggling disableStaticImages in the nextjs config. See @jaimemasson's comment below.

jaimemasson commented 3 years ago

the actual fix for this is to disableStaticImages in nextjs config. see https://nextjs.org/docs/basic-features/image-optimization#disable-static-imports

Veldrovive commented 3 years ago

If next11 does static image optimization itself, what is the benefit of using this package now?

wedneyyuri commented 3 years ago

@Veldrovive AFAIK nextjs11 doesn't do static image optimization.

mtlewis commented 3 years ago

the actual fix for this is to disableStaticImages in nextjs config. see https://nextjs.org/docs/basic-features/image-optimization#disable-static-imports

Thanks for pointing this out @jaimemasson, I wasn't aware of this configuration option! Definitely a better fix. Will edit the original issue to direct people down to your comment.

ghost commented 3 years ago

If next11 does static image optimization itself, what is the benefit of using this package now?

As of now, the next/image component is garbage.

marceliwac commented 2 years ago

This should be referenced in the README somewhere since NexJS 11 and webpack 5 are now the defaults and running into this problem is almost guaranteed for new projects.

leerob commented 2 years ago

Thank you for the feedback. I updated the original discussion to mention this workaround to help prevent people from running into this issue 🙏