Plugin doesn't work with webpack 5 / Next.js 11
mtlewis opened this issue · comments
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.
the actual fix for this is to disableStaticImages in nextjs config. see https://nextjs.org/docs/basic-features/image-optimization#disable-static-imports
If next11 does static image optimization itself, what is the benefit of using this package now?
@Veldrovive AFAIK nextjs11 doesn't do static image optimization.
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.
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.
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.
Thank you for the feedback. I updated the original discussion to mention this workaround to help prevent people from running into this issue 🙏