Next.js Discord

Discord Forum

next.config.mjs Error(s) - Ignoring next/image configuration and Unrecognized key(s) error

Answered
Frontline Genesis posted this in #help-forum
Open in Discord
Frontline GenesisOP
Can anyone help? Not sure if I'm doing anything wrong here (first time using App router and MJS)

/** @type {import('next').NextConfig} */
import withManifest from "next-manifest-loader";
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.pixabay.com",
      },
    ],
  },
};

export default withManifest(nextConfig);

Error: Invalid src prop (https://cdn.pixabay.com/photo/2021/01/15/16/49/tesla-5919764_1280.jpg) on `next/image`, hostname "cdn.pixabay.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

 ✓ Starting...
 ⚠ Invalid next.config.mjs options detected: 
 ⚠     Unrecognized key(s) in object: '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ✓ Ready in 2.3s
Answered by Frontline Genesis
 ⨯ Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error

> Build error occurred
TypeError: withManifest is not a function
    at Object.<anonymous> (/workspace/test-website/next.config.js:14:18)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadConfig (/workspace/test-website/node_modules/.pnpm/next@14.2.4_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/config.js:698:36)
 ELIFECYCLE  Command failed with exit code 1.

Getting this now, might manage my own manifest for the minute 🤣 
const { withManifest } = require('next-manifest-loader')();

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.pixabay.com",
      },
    ],
  },
};

module.exports = withManifest(nextConfig);
View full answer

17 Replies

Ben Dechrai
Hey @Frontline Genesis! First thing to do is restart your local web server so the config is sure to be loaded up. If that still doesn't work, can you share the code that displays the image?
Oh, I guess from the last snippet that you did this, and there's an error in the next.config.mjs file 🤔
Is your first snippet the entirety of the next.config.js?
Ben Dechrai
Sorry - mjs ✅ But what you posted was the entire file?
Frontline GenesisOP
Yes
 <Image
        src="https://cdn.pixabay.com/photo/2021/01/15/16/49/tesla-5919764_1280.jpg"
        className="object-cover w-full h-full"
        alt="car"
        fill
        loading="eager"
      />
Ben Dechrai
Gimme a sec - I'll try replicating this locally
You're using the latest Next.js version?
Frontline GenesisOP
Yep
Ben Dechrai
Can confirm that withManifest is causing this locally too. If I just export the config, it works. I'm trying to see if there's a known bug there...
Ben Dechrai
Currently the only way I can suggest is to not use withManifest and to generate the public/manifest.json manually. It seems the package, which hasn't has a new release for a few years, doesn't support ES module format?
Ben Dechrai
If you don't want to manage your own manifest.json, that's certainly an option. CommonJS is unlikely to go away any time soon 🤣
@Ben Dechrai If you don't want to manage your own `manifest.json`, that's certainly an option. CommonJS is unlikely to go away any time soon 🤣
Frontline GenesisOP
 ⨯ Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error

> Build error occurred
TypeError: withManifest is not a function
    at Object.<anonymous> (/workspace/test-website/next.config.js:14:18)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadConfig (/workspace/test-website/node_modules/.pnpm/next@14.2.4_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/config.js:698:36)
 ELIFECYCLE  Command failed with exit code 1.

Getting this now, might manage my own manifest for the minute 🤣 
const { withManifest } = require('next-manifest-loader')();

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.pixabay.com",
      },
    ],
  },
};

module.exports = withManifest(nextConfig);
Answer
Frontline GenesisOP
This seems like a better option for my use case anyway https://www.npmjs.com/package/favicons