[Bug]: ambiguous indirect export: useMDXComponents

[tukanoidd]

Describe the bug

Initialized storybook with init in existing vue3 + vuetify + vite + ts project, the example generated by init mostly works, except for the "Configure your project" .mdx file, all I'm getting is (the errors before "vite connected" are from firefox extensions) I tried to look for information on this but couldn't find anything.

What I've tried:

Package Managers

NPM - 10.1.0 Yarn - 1.22.19 | 3.6.4 Bun - 1.0.13

Runtimes

NodeJS - 18.18.2 | 20.9.0 Bun - 1.0.13

Others

1. Tried adding react 17/18 as a direct dependency as I've read online when people had issues with react_mdx package that it could help

Sadly, nothing worked

To Reproduce

1. Create a vue3 + vuetify + vite + ts project
2. npx storybook init
3. Wait for page to open in the browser
4. Open the "Configure your project" tab
5. See the error

System

System:
    OS: Linux 6.5 NixOS 24.05 (Uakari) 24.05 (Uakari)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Shell: 0.87.0 - /run/current-system/sw/bin/nu
  Binaries:
    Node: 20.9.0 - /nix/store/gvmdwlad82x4fwwyd7p0kvih7d3jlvzf-devenv-profile/bin/node
    Yarn: 3.6.4 - /nix/store/gvmdwlad82x4fwwyd7p0kvih7d3jlvzf-devenv-profile/bin/yarn <----- active
    npm: 10.1.0 - /nix/store/gvmdwlad82x4fwwyd7p0kvih7d3jlvzf-devenv-profile/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.6.0 => 7.6.0
    @storybook/addon-interactions: ^7.6.0 => 7.6.0
    @storybook/addon-links: ^7.6.0 => 7.6.0
    @storybook/blocks: ^7.6.0 => 7.6.0
    @storybook/test: ^7.6.0 => 7.6.0
    @storybook/vue3: ^7.6.0 => 7.6.0
    @storybook/vue3-vite: ^7.6.0 => 7.6.0
    storybook: ^7.6.0 => 7.6.0

Additional context

package.json

{
  "name": "testing-playground",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "test": "vitest",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
    "@vue/test-utils": "^2.4.2",
    "fp-ts": "^2.16.1",
    "roboto-fontface": "*",
    "ts-pattern": "^5.0.5",
    "vue": "^3.2.0",
    "vuetify": "^3.0.0"
  },
  "devDependencies": {
    "@babel/types": "^7.21.4",
    "@storybook/addon-essentials": "^7.6.0",
    "@storybook/addon-interactions": "^7.6.0",
    "@storybook/addon-links": "^7.6.0",
    "@storybook/blocks": "^7.6.0",
    "@storybook/test": "^7.6.0",
    "@storybook/vue3": "^7.6.0",
    "@storybook/vue3-vite": "^7.6.0",
    "@types/node": "^18.15.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/compiler-sfc": "^3.3.8",
    "happy-dom": "^12.10.3",
    "jsdom": "^22.1.0",
    "msw": "^2.0.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.6.0",
    "typescript": "^5.0.0",
    "unplugin-fonts": "^1.0.3",
    "vite": "^4.2.0",
    "vite-plugin-vuetify": "^1.0.0",
    "vitest": "^0.34.6",
    "vue-tsc": "^1.2.0"
  },
  "packageManager": "yarn@3.6.4"
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "types": [
      "vitest/globals"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "exclude": [
    "node_modules"
  ]
}

vite.config.ts

// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import ViteFonts from 'unplugin-fonts/vite'

// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    include: ['**/*.test.ts'],
    environment: 'jsdom',
    globals: true,
    server: {
      deps: {
        inline: ["vuetify"]
      }
    }
  },
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
    vuetify({
      autoImport: true,
    }),
    ViteFonts({
      google: {
        families: [
          {
            name: 'Roboto',
            styles: 'wght@100;300;400;500;700;900',
          },
        ],
      },
    }),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
  },
  server: {
    port: 3000,
  },
})

[Kwintijn]

Also encountering this issue with a blank (just scaffolded) Vuetify project.

[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,
  },
...

[santi755]

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,
  },
...

@Seungwoo321 It works, but be cautious with in-progress projects. If you exclude the extension option, you may need to refactor your entire code, meaning every import extension.

[TheUltDev]

Removing extensions works because Vite's default extensions value is:

['.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.

[shilman]

closing as dupe to https://github.com/storybookjs/storybook/issues/24792