[Bug]: addon-docs - mdx-react-shim.js - does not provide an export named 'useMDXComponents'

[ArnauKokoro]

Describe the bug

After succesfully install latest storybook on Vuetify (Vue3) project I see this on MDX "Configure your project" site:

Thanks!

To Reproduce

No response

System

yarn dlx storybook@latest init

Additional context

No response

[ulfgebhardt]

I have the same problem on vuetify based project using npx storybook@latest init.

How to reproduce:

npm init vuetify
npx storybook@latest init
npm run storybook
open http://localhost:6006
See error above

Also here: https://github.com/IT4Change/boilerplate-frontend

[antongospod]

Also relevant to me, but without using vuetify

[jecons]

I have the same issue using SB + Vuetify sample boilerplate

https://github.com/Integrayshaun/vue3-vuetify-storybook-recipe-example

[MLMdlb]

Same here, and the v-application-wrapper is way too big if let with autoDoc

[Shuriken933]

Same bug for me only with vuetify

[santi755]

It happens to me when I'm not using Typescript in my project. I've added Storybook on a vuetify3 + typescript projects and It works properly.

[MLMdlb]

Using TS here.

Le mar. 5 déc. 2023, 13:56, Santiago Mansilla Labbé < @.***> a écrit :

It happens to me when I'm not using Typescript in my project. I've added Storybook on a vuetify3 + typescript projects and It works properly.

— Reply to this email directly, view it on GitHub https://github.com/storybookjs/storybook/issues/24792#issuecomment-1840741634, or unsubscribe https://github.com/notifications/unsubscribe-auth/BCWVU7UWKLK44AQ3JYVDABTYH4KWJAVCNFSM6AAAAAA7FAMB2SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNBQG42DCNRTGQ . You are receiving this because you commented.Message ID: @.***>

[Seungwoo321]

It works if you exclude the extension option from vite.config.ts. But I don't know why.

// vite.config.ts
...
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
    // extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
  },
  server: {
    port: 3000,
  },
...

25013

[turbofoxwave]

seems to work if I use the doc defined default list and add '.vue' myself.

extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue']

seems that '.mts' was missing

for ref: https://vitejs.dev/config/shared-options#resolve-extensions

[Mnigos]

same issue without any alias

SyntaxError: The requested module '/src/assets/icons/index.ts' does not provide an export named 'AccomodationIcon'

This import works in ts/tsx files but not in mdx

[sem4phor]

For the time being you can patch the node_module (@storybook/addon-docs/dist/shims/mdx-react-shim.js) with export * from '@mdx-js/react';

[TheUltDev]

extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

The important part here is .mjs needs to come before .js

Otherwise it resolves the commonjs file in the same folder.

[Seungwoo321]

extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

The important part here is .mjs needs to come before .js

Otherwise it resolves the commonjs file in the same folder.

very good!!! Thank you

[shilman]

@Integrayshaun is this something you can fix in your sample project?

[valentinpalkovic]

I have the same problem on vuetify based project using npx storybook@latest init.

How to reproduce:

npm init vuetify
npx storybook@latest init
npm run storybook
open http://localhost:6006
See error above

Also here: https://github.com/IT4Change/boilerplate-frontend

I followed the reproduction steps but couldn't reproduce it with the latest version of Storybook (v8). Can someone provide a reproduction?