[material-ui] defaultShouldForwardProp is not a function error in plasmo extension
Open
Nobody has claimed this yet.
external dependency
scope: all components
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Steps:
- create a browser extension with plasmo
npm create plasmo --with-src - add mui according to the docs
npm install @mui/material @emotion/react @emotion/styled - add
ButtonorTypographytosrc/popup.tsx - run
npm run dev - 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with the Plasmo setup, the Button or Typography component in src/popup.tsx, and npm run dev. Read the reported stack trace from Typography.js and the browser console to narrow down the integration boundary. Done means the extension renders its MUI components without the defaultShouldForwardProp error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100