Open mtlewis opened 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
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 🙏
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: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 settingwebpack5
tofalse
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.