storybook
storybook copied to clipboard
[Bug]: Storybook7 corrupted unicode
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
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
- Go to the link above
- Run npm i
- Run npm run storybook
- 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