[material-ui] defaultShouldForwardProp is not a function error in plasmo extension

[shinobu-uwu]

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.

[JaitenThomas]

@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.