The requested module '/node_modules/@storybook/core/node_modules/semver/index.js?v=ed947fb2' does not provide an export named 'default'

[chaithalbe]

Summary

I finished migrating my Storybook to version 8.4.7 from 8.2.4. After upgrading, I run the storybook locally using npm run storybook. But I keep getting the below error:

Error reading preview.js:
error @ runtime.js:2250

index.js:2451 Uncaught (in promise) SyntaxError: The requested module '/node_modules/@storybook/core/node_modules/semver/index.js?v=ed947fb2' does not provide an export named 'default' (at index.js:2451:8)

Additional information

Packages I am using:

  "@storybook/addon-a11y": "^8.4.7",
  "@storybook/addon-docs": "^8.4.7",
  "@storybook/addon-essentials": "^8.4.7",
  "@storybook/addon-interactions": "^8.4.7",
  "@storybook/addon-links": "^8.4.7",
  "@storybook/addon-storysource": "^8.4.7",
  "@storybook/blocks": "^8.4.7",
  "@storybook/react": "^8.4.7",
  "@storybook/react-vite": "^8.4.7",
  "eslint-plugin-storybook": "^0.11.2",
  "storybook": "^8.4.7",
  "storybook-addon-code-editor": "^3.1.0",

Here is my .storybook/main.ts:

import type { StorybookConfig } from '@storybook/react-vite';
import { getCodeEditorStaticDirs } from 'storybook-addon-code-editor/getStaticDirs';
import { join, dirname } from 'path';
import { UserConfig } from 'vite';

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
  staticDirs: ['./public', ...getCodeEditorStaticDirs(__filename)],
  stories: [
    '../packages/**/stories/**/*.mdx',
    '../packages/**/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    getAbsolutePath('storybook-addon-code-editor'),
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: false,
      },
    },
    getAbsolutePath('@storybook/addon-a11y'),
  ],
  framework: {
    name: getAbsolutePath('@storybook/react-vite'),
    options: {},
  },
  docs: {},
  core: {
    disableTelemetry: true,
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      include: ['packages/**/src/**/*.tsx'],
    },
  },
  async viteFinal(config, { configType }) {
    const { mergeConfig } = await import('vite');

    const customConfig: UserConfig = {
      optimizeDeps: {
        exclude: [
          '@storybook/addon-viewport',
          '@storybook/blocks',
          '@storybook/icons',
          '@storybook/manager-api',
          '@storybook/components',
          'sb-vite',
        ],
      },
    };

    return mergeConfig(customConfig, config);
  },
};

export default config;

Terminal output:

> storybook
> storybook dev -p 6006

@storybook/core v8.4.7

info => Serving static files from ././.storybook/public at /
info => Serving static files from /node_modules/monaco-editor/min at /monaco-editor/min
info => Serving static files from /node_modules/@types/react/ at /@types/react
info => Starting manager..
info => Starting preview..
info Using tsconfig paths for react-docgen
╭───────────────────────────────────────────────────╮
│                                                   │
│   Storybook 8.4.7 for react-vite started          │
│   582 ms for manager and 4.93 s for preview       │
│                                                   │
│    Local:            http://localhost:6006/       │
│    On your network:  http://192.168.0.39:6006/    │
│                                                   │
╰───────────────────────────────────────────────────╯

I see the same error in the browser window and console. Need help resolving this issue.

Create a reproduction

No response