images that copied into the static folder(/_next/static/media/*) are damaged about next-optimized-images HOT 9 OPEN

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)$/);
                }
              }
            });
          }
        });
      }

from next-optimized-images.

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"

from next-optimized-images.

same issue with Next 12.0.4

from next-optimized-images.

Same with 12.0.7

from next-optimized-images.

+1

from next-optimized-images.

same problem in nextjs 12.1 :(

from next-optimized-images.

@wodka For the time being @SStoliarchuk's fix worked for me, forked it on https://github.com/jorgev259/next-optimized-images

from next-optimized-images.

+1. Had to stop using for now.

from next-optimized-images.

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

from next-optimized-images.