Bug: Wrong address for empty string message

[Nefcanto]

Steps to reproduce

I don't know where the problem could be. Therefore I can't create an MRE.
This is a video I captured:

WrongEmptyStringAddress.mp4

The point is, the message complaints that:

An empty string ("") was passed to the src attribute. This may cause the browser to download the whole page again over the network. To fix this, either do not render the element at all or pass null to src instead of an empty string.

When I open that message to see the stack, it guides me to a component of mine called ToggleView and the line specified contains this code:

setViewStyle("cards")

And the ToggleView.jsx does not contain src attribute at all in it. Of course, I have src in many other places. But how can I know which one is causing the problem? The address is wrong.

Current behavior

React provides misleading addresses that do not help at all in finding the problem, and litters the console for long time until we find the problem accidentally or through heuristics (trial & error).

Expected behavior

React should provide accurate addresses.

Your environment

  System:
    OS: Linux 6.8 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    npm: 11.0.0 - /usr/local/bin/npm
  Browsers:
    Firefox: 133.0.3 (64-bit)
  npmPackages:
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 

[Nefcanto]

At first I reported it to the MUI team: mui/material-ui#44911

[Moeez774]

bro your video quality is not good so i can't see your good easily but this may be happening due to by passing empty string to src attribute, In your code you are not passing empty string but error is in line 31 so check that item that you are passing or item that you're setting, that item is becoming empty string somehow.

[anukaal]

To address the issue of React providing misleading addresses when an empty string is passed to the src attribute, you can follow these steps. First, identify all instances of the src attribute in your codebase by searching through the project files. This helps in pinpointing where the empty string might be passed. Next, ensure that the src attribute is conditionally rendered only when it has a valid value. You can modify your components to prevent empty strings from being assigned to the src attribute by using null or conditionally rendering the element. Implement error boundaries to catch and log errors related to rendering issues, which can aid in identifying the problematic component. Additionally, add logging to your components to track the values being passed to the src attribute. Lastly, ensure you are using the latest version of React as the issue might have been addressed in a newer release. By following these steps, you should be able to identify and fix the issue with the empty string being passed to the src attribute, and React providing misleading addresses.

[Nefcanto]

@anukaal but the bug will still be there. Right?
I could find the culprit img element via trial and error. But that won't change the fact that React gives a wrong address.