[Q/A] How to use ant-design Menu in an extension?

[crazyair]

What happened?

1. use with-ant-design
2. add <Menu items={[{ key: "aa", label: "a" }]} />
3. pnpm build

import { Button, Menu } from "antd"

function IndexPopup() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <h1>
        Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
      </h1>
      <Button type="primary">Hello Ant Design</Button>
+      <Menu items={[{ key: "aa", label: "a" }]} />
    </div>
  )
}

export default IndexPopup

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

I just tried that code and it worked on my end:

[crazyair]

Why？ browser version？ node version？mac m1?


node v16.15.1

[crazyair]

Try this on your browser
chrome-mv3-prod.zip

[crazyair]

What about?

[ColdSauce]

We have been a bit busy unfortunately but will get to this when we have time

[louisgv]

Try this on your browser chrome-mv3-prod.zip

Just tested, doesn't work for me yeah. Try testing the menu component in an empty extension tho - it worked. And check your code, perhaps antd wasn't able to parse your items for some reason.

BTW, we're not antd maintainer, and integration between plasmo and antd is not a priority. We welcome your question but please ask them in the discussion or in our Discord instead: https://www.plasmo.com/s/d

I've create a channel for antd in our discord, so feel free to use that space :)

[louisgv]

Invite directly to the with-ant-design channel: https://discord.gg/KkQEkV2cBG

[crazyair]

Invite directly to the with-ant-design channel: https://discord.gg/KkQEkV2cBG

Sorry, I can't access. 😭

[crazyair]

I know the cause of the problem

1. useContext result is window

2. After checking, it is because antd relies on rc-menu. The rc-menu exports useFullPath in this way

3. It's OK to change it to this

[louisgv]

hehhhh why do they have such a weird hack xD...