storybook icon indicating copy to clipboard operation
storybook copied to clipboard

[Bug]: Storybook7 corrupted unicode

Open byhhh2 opened this issue 8 months ago • 1 comments

Describe the bug

I'm using Storybook 7 with MDX to create stories In some cases, when Unicode text is injected as props, the Unicode characters appear corrupted on the screen This issue occurs only in the local env

image

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"
}

Reproduction link

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

Reproduction steps

  1. Go to the link above
  2. Run npm i
  3. Run npm run storybook
  4. Check the URL: http://localhost:6011/?path=/docs/unicodecase--docs

System

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

Additional context

No response

byhhh2 avatar Jun 26 '24 06:06 byhhh2