defaultShouldForwardProp is not a function error in brand new application

[shinobu-uwu]

trafficstars

Steps to reproduce

Steps:

1. create a browser extension with plasmo npm create plasmo --with-src
2. add mui according to the docs npm install @mui/material @emotion/react @emotion/styled
3. add Button or Typography to src/popup.tsx
4. run npm run dev
5. open the extension and check console:

Uncaught TypeError: defaultShouldForwardProp is not a function
    at createStyled (emotion-styled-base.esm.js:154:3)
    at styled (index.js:15:16)
    at styled (createStyled.js:141:26)
    at 7un50.react (Typography.js:40:9)
    at newRequire (popup.7d3dc21e.js:72:24)
    at localRequire (popup.7d3dc21e.js:85:35)
    at hctgw../Typography.js (index.js:3:1)
    at newRequire (popup.7d3dc21e.js:72:24)
    at localRequire (popup.7d3dc21e.js:85:35)
    at 2wxYu../colors/index.js (index.js:268:1)

Current behavior

App doesn't render, blank screen is presented

Expected behavior

Components being rendered

Context

Render mui components in my browser extension

Your environment

npx @mui/envinfo

 Browser:
    Google Chrome
 System:
    OS: macOS 14.5
  Binaries:
    Node: 22.5.1 - /opt/homebrew/bin/node
    npm: 10.8.2 - /opt/homebrew/bin/npm
    pnpm: 9.6.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.59
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/core-downloads-tracker:  6.0.0
    @mui/icons-material: ^6.0.0 => 6.0.0
    @mui/material: ^6.0.0 => 6.0.0
    @mui/private-theming:  6.0.0
    @mui/styled-engine:  6.0.0
    @mui/system:  6.0.0
    @mui/types:  7.2.16
    @mui/utils:  6.0.0
    @types/react: 18.2.48 => 18.2.48
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.3.3 => 5.3.3

Search keywords: defaultShouldForwardProp is not a function error

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it. Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[shinobu-uwu]

I created a repo for a freshly created extension and the issue is happening too, the relevant code is in src/popup.tsx

https://github.com/shinobu-uwu/mui-repro

[DiegoAndai]

I've confirmed the behavior using the provided repro with both Material UI v5 and v6. Interestingly, the issue does not happen when using the Box component (all other components seem to have it). It also doesn't happen when creating a component using styled from @emotion/styled or @mui/material directly:

import isPropValid from '@emotion/is-prop-valid'
import styled from '@emotion/styled'

const H1 = styled('h1', {
	shouldForwardProp: prop => isPropValid(prop) && prop !== 'color'
  })(props => ({
	color: props.color
  }))

or

import { styled } from "@mui/material";

const H1 = styled('h1', {
	shouldForwardProp: prop => prop !== 'color'
  })(props => ({
	color: props.color
  }))

---

@Andarist would you have some clue on what could be happening? Could this be a cache issue? The error I'm getting is Uncaught TypeError: defaultShouldForwardProp is not a function from here:

https://github.com/emotion-js/emotion/blob/main/packages/styled/src/base.js#L79

[Andarist]

I didn't get to the bottom of this but it looks like a potential Parcel bug.

1. rootShouldForwardProp here is an empty object ({}). This leads to a crash - this should be a function.
2. I confirmed that the rootShouldForwardProp.js module gets initialized correctly~
3. but yet this import (well, custom require shim in the transpiled bundle) loads it as {}

It's worth noting that it gets resolved to {} through this require shim:

function localRequire(x) {
    var res = localRequire.resolve(x);
    return res === false ? {} : newRequire(res);
}

When '../styles/rootShouldForwardProp.js' gets requested for the first time by './Button.js' the localRequire.resolve(x) successfully resolves to 'iPpMB'. That's the correct module ID that leads to loading your rootShouldForwardProp.

But when './rootShouldForwardProp.js' gets requested by '../styles/styled.js' then localRequire.resolve(x) returns false. As we can see, that makes it return {}.

That relative path gets looked up in this manifest object:

{
  "@mui/system/createStyled": "gneAb",
  "./defaultTheme.js": "gUo0Q",
  "./identifier.js": "jF6EC",
  "./rootShouldForwardProp.js": false,
  "./slotShouldForwardProp.js": false,
  "@parcel/transformer-js/src/esmodule-helpers.js": "boKlo"
}

We can see here that many of those are resolved by Parcel correctly, including 2 relative paths. For some reason './rootShouldForwardProp.js' is not (and the problem isn't unique to it as './slotShouldForwardProp.js' suffers from this too)

[chirayuk]

@DiegoAndai @Andarist is there a workaround that you've discovered that may help? I tried adding a Box and a styled component in various places, but still get the same error.

[jaiten-made]

@DiegoAndai @Andarist any update?

[reedjones]

Getting the same error using latest @plasmo @mui/material @emotion/react @emotion/styled

Got it working by downgrading to the versions used here: https://github.com/PlasmoHQ/examples/blob/5a93025794b6a748df8dccabdb926dfead3f114d/with-mui/package.json

[DiegoAndai]

@chirayuk @JaitenThomas @reedjones, sorry for the delay.

I dug a bit more into this, sadly I don't have a workaround yet, but I got this info:

1. This started happening in Material UI v5.15.14, with this change: https://github.com/mui/material-ui/pull/41201/files#diff-3d12c34697056e1dcc866171889c0aae4f35324276b847c34d99b469103641dc
2. Removing the following lines makes the issue go away: https://github.com/mui/material-ui/blob/029eb3b1f4837591e729779da9a82f0a66187770/packages/mui-material/src/styles/styled.js#L7-L8

This points, as stated above, to an issue with plasmo/parcel, as they should be able to handle this code. Would anyone be willing to open an issue on their side, linking to this one, so we can get someone from their team to help debug it and develop potential solutions?

Removing the lines on point 2 is not an option as it would be a breaking change. Besides, it's valid code so it should be supported. If there are other potential solutions on the Material UI side, I'm willing to work on them, but I'm not familiar with plasmo/parcel bundling to know what those solutions could be.

[chirayuk]

Thanks @DiegoAndai. There's an existing issue on Plasmo. I've linked/added your update there—https://github.com/PlasmoHQ/plasmo/issues/941#issuecomment-2495321948

[spiceworm]

I was able to get my plasmo extension working again after downgrading mui to 5.16.14. For me, the error appears when using 6.0.0 or newer.

[DiegoAndai]

Hey @spiceworm!

In my previous investigation, I could reproduce this bug with v5.15.14. Are you sure the issue you're experiencing is the same one?

[spiceworm]

@DiegoAndai I went back and verified that the issue does goes away for me when downgrading to v5.15.14. I am now wondering if the same error is being triggered under a different scenario as you are unable to reproduce it.

Uncaught TypeError: defaultShouldForwardProp is not a function
    createStyled emotion-styled-base.esm.js:85
    styled index.js:14
    styled createStyled.js:139
    jfjkR SvgIcon.js:25
    newRequire popup.2a937e44.js:72
    localRequire popup.2a937e44.js:85
    lJk7X popup.2a937e44.js:48119
    newRequire popup.2a937e44.js:72
    localRequire popup.2a937e44.js:85
    kvuL3 popup.2a937e44.js:48092

[jozsi]

Here's a workaround:

// Workaround Parcel bug
import { rootShouldForwardProp, slotShouldForwardProp } from '@mui/material/styles/styled';

const FORCE_BUNDLE = [
  rootShouldForwardProp,
  slotShouldForwardProp,
];

[Senderek]

Here's a workaround:

// Workaround Parcel bug import { rootShouldForwardProp, slotShouldForwardProp } from '@mui/material/styles/styled';

const FORCE_BUNDLE = [ rootShouldForwardProp, slotShouldForwardProp, ];

It looks like this workaround no longer works for MUI 7.x.x and emotion 11. Any additional suggestions?