Deploy preview different to npm run preview with material ui badge component

Support
, , ,
1

Hi all. I’ve got a weird issue where a Material UI Badge component is not rendering.
I can’t see it during my deploy preview - However when I build the package locally using the same command, then I see it with npm run preview.
This is the Material UI component in question.

Deploy Preview:
image
image

Preview locally:
image
image

I don’t know if props/children: undefined is causing the problem. Maybe badge is a reserved keyword with netlify? Anyone got any advice, thanks!?

2

Where’s this element on your website? I don’t see it anywhere.

3

Click Try App & it’s suppose to show if you have something added to your list.
Do any search and then click the + button next to a product.
The “badge” dot should show in the top left corner of the screen, top right of the 3 stripe menu.

image

4

The element seems to exist in the DOM, it simply doesn’t have any colour. I added background-color: yellow and it shows:

image

Seems like some kind of a CSS config issue.

5

I’ll double check the logic, but it’s supposed to be hidden until you add something to your list:

            {Object.keys(addToListItemsPaknSave).length > 0 ||
            Object.keys(addToListItemsCountdown).length > 0 ||
            Object.keys(addToListItemsNewWorld).length > 0 ? (
              <Badge color="badgedot" variant="dot" sx={{ flexGrow: 1 }}>
                <MenuIcon />
              </Badge>
            ) : (
              <MenuIcon />
            )}

Also doesn’t explain why it works with npm run preview?

6

Hidden and not added to DOM are 2 different things. In your code, the item should not be added to the DOM based on the condition. However, it is being added, so the condition is working fine.

As for why it works locally, can’t say. I don’t have your code, nor can I troubleshoot it.