[Bug]: react-vite + storybook + storybook dev not working

[siosio34]

Describe the bug

We are planning to change the bundling tool from react-webpack5 to react-vite to improve storybook build speed

However, the process does not proceed as the following error appears.

I will also attach existing source code that may be helpful in resolving the error. If you need any more information, please leave a comment.

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig({
  assetsInclude: ['/sb-preview/runtime.js'],
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
    tsconfigPaths(),
  ],
  define: {
    'process.env': {},
  },
})

.storybook/main.ts

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

import path  from 'path'

const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: path.resolve(__dirname, '../vite.config.ts'),
      }
    },
  },

  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-designs',
    '@storybook/addon-interactions',
    'storybook-dark-mode',
    // '../src/helpers/with-jotai/preset.ts',
  ],

  env: (config) => ({
    ...config,
    MOCK: 'true',
    BRANCH_NAME: process.env.BRANCH_NAME ?? '',
  }),

  typescript: {
    check: false,
    reactDocgen: false
  },
  docs: {
    autodocs: 'tag',
  },
}

export default config

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.2
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn <----- active
    npm: 9.6.7 - /opt/homebrew/bin/npm
    pnpm: 8.6.10 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.129
    Safari: 17.2
  npmPackages:
    @storybook/addon-actions: ^7.6.6 => 7.6.6 
    @storybook/addon-designs: ^7.0.7 => 7.0.7 
    @storybook/addon-essentials: ^7.6.6 => 7.6.6 
    @storybook/addon-interactions: ^7.6.6 => 7.6.6 
    @storybook/addon-links: ^7.6.6 => 7.6.6 
    @storybook/addon-viewport: ^7.6.6 => 7.6.6 
    @storybook/addons: ^7.6.6 => 7.6.6 
    @storybook/jest: ^0.2.3 => 0.2.3 
    @storybook/react: ^7.6.6 => 7.6.6 
    @storybook/react-vite: ^7.6.6 => 7.6.6 
    @storybook/test-runner: ^0.16.0 => 0.16.0 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    @storybook/testing-react: ^2.0.0 => 2.0.1 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    msw-storybook-addon: ^1.10.0 => 1.10.0 
    storybook: ^7.6.6 => 7.6.6 
    storybook-dark-mode: ^3.0.3 => 3.0.3

Additional context

No response

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[siosio34]

thank you. Actually, the problem was in the part where we imported the cjs module file within the esm module in our project. After converting the legacy cjs module to esm module, it runs fine.

Thank you very much for reading and responding to this issue. @shilman