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

Material UI 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

Material UI should provide accurate addresses.

Context

No response

Your environment

npx @mui/envinfo

  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
    pnpm: Not Found
  Browsers:
    Firefox: 133.0.3 (64-bit)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/base:  5.0.0-beta.68 
    @mui/core-downloads-tracker:  6.3.0 
    @mui/icons-material: ^6.3.0 => 6.3.0 
    @mui/lab: ^6.0.0-beta.20 => 6.0.0-beta.21 
    @mui/material: ^6.3.0 => 6.3.0 
    @mui/private-theming:  6.3.0 
    @mui/styled-engine:  6.3.0 
    @mui/system:  6.3.0 
    @mui/types:  7.2.20 
    @mui/utils:  6.3.0 
    @mui/x-date-pickers: ^7.23.3 => 7.23.3 
    @mui/x-internals:  7.23.0 
    @types/react: ^19.0.2 => 19.0.2 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 

Search keywords: empty string

[mj12albert]

@Nefcanto I think this issue is not related to Material UI, and the error is thrown by React: https://github.com/facebook/react/blob/main/packages/react-dom/src/__tests__/ReactDOMComponent-test.js#L590-L602

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?

When you click your ToggleView in the recording, it seems that the error appears after the view changes so my guess would be one of the new images that were loaded/rendered as the view changes?

[Nefcanto]

@mj12albert I saw the link you sent. Yes, you're right. It belongs to the React. I will create an issue there.

When you click your ToggleView in the recording, it seems that the error appears after the view changes

Yeah of course. The name of the button is ToggleView so it renders something new. But the point still remains. The address is wrong. I'll report it to the Ream team. Thank you so much.

[DiegoAndai]

I am tentatively closing it as it doesn't seem like an error on the Material UI side. Feel free to reopen it if new evidence shows something is wrong in Material UI.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Nefcanto How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.