[BUG] Removing some MUI component in example causes 'Uncaught TypeError: defaultShouldForwardProp is not a function' error

[killinsun]

What happened?

I am installing Plasmo with MUI using examples/with-mui.

However, I got an error when I removed some components from example codes.
And the extension popup doesn't show content other than a small white background paper.

Before

import Button from "@mui/material/Button"
import Input from "@mui/material/Input"
import Link from "@mui/material/Link"
import Stack from "@mui/material/Stack"
import Typography from "@mui/material/Typography"
import { useState } from "react"

function IndexPopup() {
  const [data, setData] = useState("")

  return (
    <Stack minWidth={240}>
      <Typography variant="h6">
        Welcome to your{" "}
        <Link href="https://www.plasmo.com" target="_blank">
          Plasmo
        </Link>{" "}
        Extension!
      </Typography>
      <Input onChange={(e) => setData(e.target.value)} value={data} />
      <Button href="https://docs.plasmo.com" target="_blank">
        View Docs
      </Button>
    </Stack>
  )
}

export default IndexPopup

after(I removed and component from JSX.

import Link from "@mui/material/Link"
import Stack from "@mui/material/Stack"
import Typography from "@mui/material/Typography"

function IndexPopup() {
  return (
    <Stack minWidth={240}>
      <Typography variant="h6">
        Welcome to your{" "}
        <Link href="https://www.plasmo.com" target="_blank">
          Plasmo
        </Link>{" "}
        Extension!
      </Typography>
    </Stack>
  )
}

export default IndexPopup

When I removed <Button> and <Input> components caused the error.
so Keeping <Button> or <input> components in the code won't happen anything.

Then, the below also works well.

import Link from "@mui/material/Link"
import Stack from "@mui/material/Stack"
import Typography from "@mui/material/Typography"
import {Button} from "@mui/material";

function IndexPopup() {
  return (
    <Stack minWidth={240}>
      <Typography variant="h6">
        Welcome to your{" "}
        <Link href="https://www.plasmo.com" target="_blank">
          Plasmo
        </Link>{" "}
        Extension!
      </Typography>
      <Button sx={{ display: 'none' }} />
    </Stack>
  )
}

export default IndexPopup

package.json

{
  "name": "plasmo-mui",
  "displayName": "Plasmo mui",
  "version": "0.0.1",
  "description": "A basic Plasmo extension.",
  "author": "Plasmo Corp. <[email protected]>",
  "scripts": {
    "dev": "plasmo dev",
    "build": "plasmo build",
    "package": "plasmo package"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/icons-material": "^5.15.15",
    "@mui/material": "^5.15.15",
    "plasmo": "0.85.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
    "@types/chrome": "0.0.258",
    "@types/node": "20.11.5",
    "@types/react": "18.2.48",
    "@types/react-dom": "18.2.18",
    "prettier": "3.2.4",
    "typescript": "5.3.3"
  },
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "manifest": {
    "host_permissions": [
      "https://*/*"
    ]
  }
}

the error still happen when I create a new project and install MUI with these codes below.

pnpm add @mui/material @emotion/react @emotion/styled

pnpm install

I'd like to contribute to the project, but I don't have a good idea to fix it.

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

In my developer console, I could see these logs.


INFO   | [plasmo/parcel-runtime]: Connected to HMR server for /Users/{MASKED}plasmo-mui/plasmo-mui/node_modules/.pnpm/@[email protected]/node_modules/@plasmohq/parcel-transformer-manifest/runtime/plasmo-default-background.ts
runtime-b6cb8215118231ce.js:1 🟠 WARN   | [plasmo/parcel-runtime]: Connection to the HMR server is closed for /Users/{MASKED}/plasmo-mui/plasmo-mui/node_modules/.pnpm/@[email protected]/node_modules/@plasmohq/parcel-transformer-manifest/runtime/plasmo-default-background.ts
emotion-styled-base.browser.esm.js:72 Uncaught TypeError: defaultShouldForwardProp is not a function
    at createStyled (emotion-styled-base.browser.esm.js:72:10)
    at styled (index.js:15:16)
    at createStyled.js:164:26
    at 1WVeJ.@babel/runtime/helpers/esm/objectWithoutPropertiesLoose (Typography.js:31:9)
    at newRequire (popup.7d3dc21e.js:72:24)
    at localRequire (popup.7d3dc21e.js:85:35)
    at 25cbc../Typography (index.js:3:1)
    at newRequire (popup.7d3dc21e.js:72:24)
    at localRequire (popup.7d3dc21e.js:85:35)
    at jirFr.@babel/runtime/helpers/esm/objectWithoutPropertiesLoose (Link.js:16:1)
runtime-864f818a799edc31.js:1 🔵 INFO   | [plasmo/parcel-runtime]: Connected to HMR server for /Users/{MASKED}/plasmo-mui/plasmo-mui/.plasmo/static/popup.tsx

### (OPTIONAL) Contribution

- [X] I would like to fix this BUG via a PR

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct
- [X] I checked the [current issues](https://github.com/PlasmoHQ/plasmo/issues?q=is%3Aopen+is%3Aissue+label%3Abug) for duplicate problems.