[Bug] mdx stories with Chinese name are not showing up in side-menu

[youngboy]

What version of vite are you using?

2.9.6

System info and storybook versions

Environment Info:
System:
OS: macOS 12.2
CPU: (8) x64 Apple M1 Pro
Binaries:
Node: 16.10.0 - /usr/local/bin/node
Yarn: 3.1.1 - /usr/local/bin/yarn
npm: 7.24.0 - /usr/local/bin/npm
Browsers:
Chrome: 101.0.4951.64
Firefox: 88.0.1
Safari: 15.3

Describe the Bug

write stories in mdx format, if the name contains Chinese string (or non-ascii string ?). it will not showing up properly.

reproduce steps:

clone this repo, add file examples/vue/stories/abc.stories.mdx with following content

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

import MyButton from './Button.vue';

<Meta title="Example/Utf" component={MyButton} />

export const Template = (args) => ({
  components: { MyButton },
  setup() {
    return { args };
  },
  template: '<my-button v-bind="args" />',
});

<Story
  name="测试"
>
  {Template.bind({})}
</Story>

1. run yarn example:vue
2. open http://localhost:6009/
3. story Example/Utf not showing as expected
4. modify the file, replace 测试 to test
5. Example/Utf is showing now

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

after some investigation, I found out the story name occur in https://github.com/storybookjs/builder-vite/blob/main/packages/builder-vite/inject-export-order-plugin.ts#L24 is not equal to https://github.com/storybookjs/storybook/blob/56b5552da077f48bf653b2a115f21d38e95ccf2e/lib/client-api/src/StoryStoreFacade.ts#L177

[IanVS]

@youngboy thanks for reporting this. Does it work correctly if you use the webpack builder?

[youngboy]

I'm stick with vite, haven't try webpack yet 😂.

Also, it was working until I upgrade storybook from 6.4.x to 6.5.0 and builder-vite from 0.1.25 to 0.1.34

[IanVS]

I wasn't asking you to change to webpack, I meant it as a way to troubleshoot whether it is an issue within storybook itself, or the vite builder (this project). :-D. You should just be able to remove the builder option from .storybook/main.js and try running again.

[youngboy]

Oh, thanks for your time and help.

just tried out webpack builder, and it is works fine.

[youngboy]

I think I found the issue causing this. https://github.com/brillout/vite-plugin-mdx/blob/master/src/transform.ts#L39

export name in chinese char is add from https://github.com/storybookjs/mdx1-csf/blob/mdx1-support/src/sb-mdx-plugin.ts#L521 to export each story

vite-plugin-mdx is using esbuild to parse the source code, but it can't properly parse import / export name that is chinese char ?

Add charset: 'utf8' option to vite-plugin-mdx's source code then it works fine in my case

[IanVS]

Thanks for the investigation, @youngboy. We are in the process of moving away from vite-plugin-mdx, see #377. It still needs some kinks worked about before it's ready, but we're working on it. For now, you may need to stick with the webpack builder if this is a requirement for you.

[joshwooding]

Hi @youngboy. This should be fixed in v0.1.38+

Closing this for now but if you still see this please let me know.