@storybook/builder-vite is not supported resolving ES modules

[kas0189]

Summary

I am using the latest version of storybook 10.0.8. This error occurs after running npm run storybook:

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/.../node_modules/@storybook/builder-vite' is not supported resolving ES modules imported from /.../node_modules/storybook/dist/_node-chunks/chunk-425EMBPZ.js

--- main.ts

`import {fileURLToPath} from 'node:url';
import {dirname} from 'node:path';

function getAbsolutePath(value: string): string {
return dirname(fileURLToPath(import.meta.resolve(${value}/package.json)));
}

const config = {
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {
builder: {
viteConfigPath: '.storybook/vite.config.js'
}
}
},
stories: ['../src//*.mdx', '../src//*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-docs'),
getAbsolutePath('@storybook/addon-onboarding'),
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@chromatic-com/storybook')
],
core: {
builder: getAbsolutePath('@storybook/builder-vite')
}
};

export default config;`

--- tsconfig.json

`{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "dist/",
"sourceMap": true,
"declaration": true,
"noEmit": false,
"moduleResolution": "bundler",

"module": "ESNext",
"esModuleInterop": true,
"resolveJsonModule": true,
"skipLibCheck": true

},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}`

What is wrong with me?)

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @kas0189! I'm Dosu and I’m helping the storybook team.

The error happens because Storybook 10.x expects addon and builder names as plain strings, not resolved paths. Wrapping them with getAbsolutePath or import.meta.resolve causes Storybook to try importing a directory, which triggers the "ERR_UNSUPPORTED_DIR_IMPORT" error details.

To fix it, update your .storybook/main.ts like this:

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: '.storybook/vite.config.js'
      }
    }
  },
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@chromatic-com/storybook'
  ]
};

export default config;

You do not need to resolve the builder path manually—just use the package name as a string. Only use import.meta.resolve or fileURLToPath if you have a very custom setup, which is rare reference.

Your tsconfig.json settings for "module": "ESNext" and "moduleResolution": "bundler" are fine for ESM, but they don't affect this error.

You can try these steps and Storybook should start without the directory import error. If you still see issues, please share a minimal reproduction.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}