mui / mui/material-ui

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

Open
#43,477 14 comments 9 reactions 0 assignees View on GitHub

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:

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.