Open Sharklegs opened 2 years ago
Facing the same issue with Next 12.0.4
The files in the .next/static/media folder are structured like module files. e.g.
module.exports = "/_next/static/images/filename_generated_by_next_optimized_images"
same issue with Next 12.0.4
Same with 12.0.7
+1
After some digging I was able to create a workaround for the issue:
The file: /node_modules/next-optimized-images/lib/index.js
@ line 43
Replace:
// remove (unoptimized) builtin image processing introduced in next.js 9.2
if (enrichedConfig.module.rules) {
enrichedConfig.module.rules.forEach((rule) => {
if (rule.oneOf) {
rule.oneOf.forEach((subRule) => {
if (
subRule.issuer && !subRule.test && !subRule.include && subRule.exclude
&& subRule.use && subRule.use.options && subRule.use.options.name
) {
if ((String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' || String(subRule.issuer) === '/\\.(css|scss|sass)$/') && subRule.use.options.name.startsWith('static/media/')) {
subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
}
}
});
}
});
}
with
// remove (unoptimized) builtin image processing introduced in next.js 9.2
if (enrichedConfig.module.rules) {
enrichedConfig.module.rules.forEach((rule) => {
if (rule.oneOf) {
rule.oneOf.forEach((subRule) => {
if (
subRule.issuer && !subRule.test && !subRule.include && subRule.exclude
/* && subRule.use && subRule.use.options && subRule.use.options.name */
) {
if ((String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' || String(subRule.issuer) === '/\\.(css|scss|sass)$/')/* && subRule.use.options.name.startsWith('static/media/') */) {
subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
}
}
});
}
});
}
same problem in nextjs 12.1 :(
@wodka For the time being @SStoliarchuk's fix worked for me, forked it on https://github.com/jorgev259/next-optimized-images
+1. Had to stop using for now.
After some digging I was able to create a workaround for the issue: The file:
/node_modules/next-optimized-images/lib/index.js
@ line 43 Replace:// remove (unoptimized) builtin image processing introduced in next.js 9.2 if (enrichedConfig.module.rules) { enrichedConfig.module.rules.forEach((rule) => { if (rule.oneOf) { rule.oneOf.forEach((subRule) => { if ( subRule.issuer && !subRule.test && !subRule.include && subRule.exclude && subRule.use && subRule.use.options && subRule.use.options.name ) { if ((String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' || String(subRule.issuer) === '/\\.(css|scss|sass)$/') && subRule.use.options.name.startsWith('static/media/')) { subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/); } } }); } }); }
with
// remove (unoptimized) builtin image processing introduced in next.js 9.2 if (enrichedConfig.module.rules) { enrichedConfig.module.rules.forEach((rule) => { if (rule.oneOf) { rule.oneOf.forEach((subRule) => { if ( subRule.issuer && !subRule.test && !subRule.include && subRule.exclude /* && subRule.use && subRule.use.options && subRule.use.options.name */ ) { if ((String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' || String(subRule.issuer) === '/\\.(css|scss|sass)$/')/* && subRule.use.options.name.startsWith('static/media/') */) { subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/); } } }); } }); }
it is works
next verison: 11.1.2 next-optimized-images version: 2.6.2
images can be found in .next/static/media/ but can not preview or open, tips: it may damaged.
in server open the image in new tab, it is a white empty Square picture.
and the inlineImageLimit is 8192 by default right? but no matter how small the image is, and how big the file size I set , inline can not work, I always get copied to the static folder of next.
I change next to 10.1.3 then it perform well no such problem.
next.config.js:
example: there is an icon: assest/icon-tips.png
result: