描述bug

我正在使用Storybook 7和MDX创建故事
在某些情况下，当将Unicode文本注入为属性时，屏幕上的Unicode字符显示为损坏
这个问题只出现在本地环境中

import { Meta, Canvas, Story } from "@storybook/addon-docs"

<Meta title="UnicodeCase" />

### Case1

<Canvas>
  <Story name="case1">
    {() => {
      return <div>👍</div>
    }}
  </Story>
</Canvas>

### Case 2 💀

export const Case2 = ({ text }) => {
  return <div>{text}</div>
}

<Canvas>
  <Story name="case2">
    {() => {
      return <Case2 text="🤔" />
    }}
  </Story>
</Canvas>

### Case 3

export const Case3 = () => {
  return <Case2 text="😇" />
}

<Canvas>
  <Story name="case3">{Case3.bind()}</Story>
</Canvas>

### Case 4

export const Case4 = ({ comp }) => {
  return <div>{comp}</div>
}

<Canvas>
  <Story name="case4">
    <Case4 comp={<span>😵‍💫</span>} />
  </Story>
</Canvas>

### Case 5 💀

export const Text = ({ text }) => <div>{text}</div>
export const Comp = ({ comp }) => comp
export const Case5 = (args) => <Comp {...args} />

<Canvas>
  <Story name="case5" args={{ comp: <Text text="👀" /> }}>
    {Case5.bind()}
  </Story>
</Canvas>

package.json

{
  "name": "storybook-unicode",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.101",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6011",
    "build-storybook": "storybook build",
    "deploy": "gh-pages -d storybook-static"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:storybook/recommended"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.6.20",
    "@storybook/addon-interactions": "^7.6.20",
    "@storybook/addon-links": "^7.6.20",
    "@storybook/addon-onboarding": "^1.0.11",
    "@storybook/blocks": "^7.6.20",
    "@storybook/preset-create-react-app": "^7.6.20",
    "@storybook/react": "^7.6.20",
    "@storybook/react-webpack5": "^7.6.20",
    "@storybook/test": "^7.6.20",
    "eslint-plugin-storybook": "^0.8.0",
    "prop-types": "^15.8.1",
    "storybook": "^7.6.20",
    "webpack": "^5.92.1"
  },
  "homepage": "https://byhhh2.github.io/storybook-unicode"
}

复现链接

https://github.com/byhhh2/storybook-unicode

复现步骤

1. 转到上面的链接
2. 运行npm i
3. 运行npm run storybook
4. 检查URL: http://localhost:6011/?path=/docs/unicodecase--docs

系统

Storybook Environment Info:

  System:
    OS: macOS 13.0
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm <----- active
    pnpm: 8.6.6 - ~/.nvm/versions/node/v16.15.1/bin/pnpm
  Browsers:
    Chrome: 118.0.5993.88
    Safari: 16.1
  npmPackages:
    @storybook/addon-essentials: ^7.6.20 => 7.6.20 
    @storybook/addon-interactions: ^7.6.20 => 7.6.20 
    @storybook/addon-links: ^7.6.20 => 7.6.20 
    @storybook/addon-onboarding: ^1.0.11 => 1.0.11 
    @storybook/blocks: ^7.6.20 => 7.6.20 
    @storybook/preset-create-react-app: ^7.6.20 => 7.6.20 
    @storybook/react: ^7.6.20 => 7.6.20 
    @storybook/react-webpack5: ^7.6.20 => 7.6.20 
    @storybook/test: ^7.6.20 => 7.6.20 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^7.6.20 => 7.6.20

其他上下文

• 无响应*