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

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]

Thanks for the investigation, @youngboy. We are in the process of moving away from vite-plugin-mdx, see https://github.com/storybookjs/builder-vite/pull/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.

[youngboy]

Oh, thanks for your time and help.

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