Image is missing required "src" property, but stack trace does not inform where

[ranisalt]

What version of Next.js are you using?

10.1.3

What version of Node.js are you using?

15.11.0

What browser are you using?

Firefox

What operating system are you using?

Linux

How are you deploying your application?

next dev

Describe the Bug

Some image in the middle of the hundreds of images I have has an empty src. The error message helps nothing to find this particular image:

Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {}
    at Image (webpack-internal:///../../node_modules/next/dist/client/image.js:185:13)
    at processChild (/home/rsa/skyfall/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/rsa/skyfall/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/rsa/skyfall/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/rsa/skyfall/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/home/rsa/skyfall/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/home/rsa/skyfall/frontend/node_modules/next/dist/next-server/server/render.js:54:854)
    at Function.getInitialProps (webpack-internal:///../../node_modules/next/dist/pages/_document.js:141:19)
    at loadGetInitialProps (/home/rsa/skyfall/frontend/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/home/rsa/skyfall/frontend/node_modules/next/dist/next-server/server/render.js:54:1145)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async /home/rsa/skyfall/frontend/node_modules/next/dist/next-server/server/next-server.js:112:97
    at async /home/rsa/skyfall/frontend/node_modules/next/dist/next-server/server/next-server.js:105:142
    at async DevServer.renderToHTMLWithComponents (/home/rsa/skyfall/frontend/node_modules/next/dist/next-server/server/next-server.js:137:387)
    at async DevServer.renderToHTML (/home/rsa/skyfall/frontend/node_modules/next/dist/next-server/server/next-server.js:138:522)
    at async DevServer.renderToHTML (/home/rsa/skyfall/frontend/node_modules/next/dist/server/next-dev-server.js:35:578)

Expected Behavior

I'm not sure it's possible, but it would be good to know where the offending Image has been instantiated, so I could know where to put checks and guards.

To Reproduce

Add one image with an empty src in the middle of several others.

[stajics]

@ranisalt Any workarounds for this?

[ranisalt]

@ranisalt Any workarounds for this?

So far, when it happens, I just comment out one by one until I find the culprit 😢

[leerob]

Fixed with #27180

[ranisalt]

@leerob I don't see how that PR fixes this problem. It prevents it from happening in one specific test in Next.js suite, not for the users.

What I ask for is that I get a more detailed error log when it happens by mistake, by e.g. appending the file and line number if possible.

[timneutkens]

Reopening this as it can indeed be improved 👍

[leerob]

Indeed, my bad @ranisalt!

[NorbertHS]

Hello,
I face the same issue but in my case, I don't even have the Stack 😅

error - node_modules/next/dist/client/image.js (319:18) @ Image1
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {}
null

I spent some time to track this null as I was thinking it comes from one of my logger before to understand it was supposed to be the stack (I assume so?).

It would be definitely helpful for productivity if we can have a hint about which instance throw this error (if it includes filename and line, it will be insanely amazing!)

[styfle]

Most of the image errors print the src prop so you know which one caused the error.

In this case, the error message is printed when there is no src prop provided so the message prints the other props:

next.js/packages/next/client/image.tsx

Lines 383 to 387 in 4ea7d7b

	throw new Error(
	`Image is missing required "src" property. Make sure you pass "src" in props to the \`next/image\` component. Received: ${JSON.stringify(
	{ width, height, quality }
	)}`
	)

The reason why you're seeing Received: {} is that the src, width, height, and quality are all missing.

@timneutkens I'm curious about your thoughts on how to improve this error message.

Perhaps we need to print the entire stack here

next.js/packages/next/server/dev/next-dev-server.ts

Lines 752 to 768 in 6acfffa

	if (originalFrame) {
	const { originalCodeFrame, originalStackFrame } = originalFrame
	const { file, lineNumber, column, methodName } = originalStackFrame
	console.error(
	(type === 'warning' ? chalk.yellow('warn') : chalk.red('error')) +
	' - ' +
	`${file} (${lineNumber}:${column}) @ ${methodName}`
	)
	console.error(
	`${(type === 'warning' ? chalk.yellow : chalk.red)(err.name)}: ${
	err.message
	}`
	)
	console.error(originalCodeFrame)
	usedOriginalStack = true
	}

[AyoubAtba]

Any solution to this issue.
I'm using SVG, so when I enable webpack in the next.config.js file I get this error and no stack trace.

[nkpremices]

Any solutions to this problem ?
Facing it rn

[loiclaudet]

Faced this issue because I passed an empty string '' to the src prop.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.