Error when using next-optimized-images

[realav]

Describe the bug

I am getting this error when using next-optimized-images for my project to enable static exports. Any idea what's causing this?

node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[Error: Input buffer contains unsupported image format]

Package.json

{ "name": "tailwind-nextjs-starter-blog", "version": "1.1.2", "private": true, "scripts": { "start": "next-remote-watch ./data", "dev": "next dev", "build": "next build && node ./scripts/generate-sitemap && next export", "serve": "next start", "analyze": "cross-env ANALYZE=true next build", "lint": "next lint --fix --dir pages --dir components --dir lib --dir layouts --dir scripts", "prepare": "husky install" }, "dependencies": { "@mailchimp/mailchimp_marketing": "^3.0.58", "@tailwindcss/forms": "^0.3.2", "@tailwindcss/typography": "^0.4.0", "autoprefixer": "^10.2.5", "esbuild": "^0.12.15", "github-slugger": "^1.3.0", "gray-matter": "^4.0.2", "image-size": "1.0.0", "mdx-bundler": "^6.0.1", "next": "11.1.2", "next-compose-plugins": "^2.2.1", "next-optimized-images": "^3.0.0-canary.10", "next-themes": "^0.0.14", "postcss": "^8.3.5", "preact": "^10.5.13", "react": "17.0.2", "react-dom": "17.0.2", "reading-time": "1.3.0", "rehype-autolink-headings": "^6.0.0", "rehype-katex": "^6.0.0", "rehype-prism-plus": "^1.0.0", "rehype-slug": "^5.0.0", "remark-footnotes": "^4.0.0", "remark-gfm": "^2.0.0", "remark-math": "^5.0.0", "sharp": "^0.28.3", "smoothscroll-polyfill": "^0.4.4", "tailwindcss": "^2.2.2", "unist-util-visit": "^4.0.0" }, "devDependencies": { "@next/bundle-analyzer": "11.1.2", "@svgr/webpack": "^5.5.0", "cross-env": "^7.0.3", "dedent": "^0.7.0", "eslint": "^7.29.0", "eslint-config-next": "11.1.2", "eslint-config-prettier": "^8.3.0", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.3.1", "file-loader": "^6.0.0", "globby": "11.0.3", "husky": "^6.0.0", "inquirer": "^8.1.1", "lint-staged": "^11.0.0", "next-remote-watch": "^1.0.0", "prettier": "2.2.1" }, "lint-staged": { ".+(js|jsx|ts|tsx)": [ "eslint --fix" ], ".+(js|jsx|ts|tsx|json|css|md|mdx)": [ "prettier --write" ] } }

System Info (if dev / build issue):

• OS: macos
• Node version 16.10

Additional context Add any other context about the problem here.

[timlrx]

Hi @legendaryaman, unfortunately I am not supporting next-optimized-image as we are using the next/image component and it has not been updated in over a year. Will leave the issue open if someone has experience integrating this repo with next-optimized-image and would like to chime in.

[realav]

I just found out that the Image component is very nicely integrated. This allows an easy switch between the NextImage component and the plain<img> tag

I just have to change the tag in /components/Image.js

import NextImage from 'next/image'

// eslint-disable-next-line jsx-a11y/alt-text
const Image = ({ ...rest }) => <NextImage {...rest} />

export default Image

To

//import NextImage from 'next/image'

// eslint-disable-next-line jsx-a11y/alt-text
const Image = ({ ...rest }) => <img {...rest} />

export default Image

For anyone who is getting this common error message:

Image Optimization using Next.js' default loader is not compatible with next export

Just use the normal <img> component in Image.js for Next Static exports

[timlrx]

Ah, I thought you have already changed that setting. Yes, you can't use the next/image component for static export.