[Bug]: Uncaught TypeError: _interopRequireDefault is not a function

[ravindraguptacapgemini]

Describe the bug

I am working with React Native and Webpack5 based dual storybook setup, I have migrated from storybook 8 to 9 version. I tried many things and couldn't resolve the issues.
I am currently getting error after running command yarn storybook .

Here is my setup files
.storybook/main.ts

import { Configuration } from 'webpack';
import path from 'path';

module.exports = {
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
  ],

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-designs',
    '@storybook/addon-a11y',
    'storybook-addon-rtl',
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: [
          'react-native-reanimated',
        ],
        babelPlugins: [
          // '@babel/plugin-proposal-export-namespace-from',
          'react-native-reanimated/plugin',
        ],
      },
    },
    '@storybook/addon-webpack5-compiler-babel',
    '@chromatic-com/storybook',
    '@storybook/addon-docs',
  ],

  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {},

  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },

  webpackFinal: async (config: Configuration) => {
    // Add loader for .txt files
    if (!config.module) {
      config.module = { rules: [] };
    }
    if (!config.module.rules) {
      config.module.rules = [];
    }
    config.module.rules.push({
      test: /\.txt$/,
      type: 'asset/source',
      include: path.resolve(__dirname, '../src'),
    });

    // Add fallback for Node.js core modules
    if (!config.resolve) {
      config.resolve = {};
    }
    if (!config.resolve.fallback) {
      config.resolve.fallback = {};
    }
    config.resolve.fallback = {
      ...config.resolve.fallback,
      tty: false,
    };

    config.resolve.conditionNames = ['module', 'import', 'require'];
    return config;
  },
};

.storybook/preview.tsx

import type { Preview } from '@storybook/react-webpack5';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  tags: ['autodocs'],
};

export default preview;

Reproduction link

https://new-storybook.netlify.app

Reproduction steps

Use webpack5 with React Native for Storybook

System

System:
    OS: macOS 15.7.1
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.4 - /usr/local/bin/node
    Yarn: 3.6.4 - ~/node_modules/.bin/yarn <----- active
    npm: 10.8.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 141.0.7390.123
    Safari: 26.0.1
  npmPackages:
    @storybook/addon-a11y: 9.1.15 => 9.1.15 
    @storybook/addon-designs: ^10.0.2 => 10.0.2 
    @storybook/addon-docs: 9.1.15 => 9.1.15 
    @storybook/addon-knobs: ^8.0.1 => 8.0.1 
    @storybook/addon-links: 9.1.15 => 9.1.15 
    @storybook/addon-ondevice-actions: ^9.1.4 => 9.1.4 
    @storybook/addon-ondevice-backgrounds: 9.1.4 => 9.1.4 
    @storybook/addon-ondevice-controls: 9.1.4 => 9.1.4 
    @storybook/addon-ondevice-notes: 9.1.4 => 9.1.4 
    @storybook/addon-react-native-web: ^0.0.29 => 0.0.29 
    @storybook/addon-webpack5-compiler-babel: ^3.0.6 => 3.0.6 
    @storybook/icons: ^1.4.0 => 1.6.0 
    @storybook/react-native: 9.1.4 => 9.1.4 
    @storybook/react-webpack5: 9.1.15 => 9.1.15 
    chromatic: ^13.3.2 => 13.3.2 
    eslint-plugin-storybook: ^9.1.15 => 9.1.15 
    storybook: 9.1.15 => 9.1.15 
    storybook-addon-rtl: 2.0.0 => 2.0.0

Additional context

Please suggest a fix, thanks

[dosubot]

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

Your error is likely due to compatibility issues between Storybook 9.x, Webpack 5, and the @storybook/addon-react-native-web addon. The official docs now recommend migrating to the new @storybook/react-native-web-vite framework, which is faster, more stable, and maintained for React Native Web setups in Storybook 9+.

Here's what you should do:

1. Remove @storybook/addon-react-native-web from your addons array.
2. Change your framework in .storybook/main.ts from @storybook/react-webpack5 to @storybook/react-native-web-vite.
3. Uninstall both @storybook/addon-react-native-web and @storybook/react-webpack5 from your dependencies.
4. Install @storybook/react-native-web-vite and vite as dev dependencies.
5. Move any relevant options (like modulesToTranspile and Babel plugins) into the new framework options as shown in the migration guide.

After making these changes, run yarn storybook doctor to check for any remaining issues or incompatible addons. This migration should resolve the _interopRequireDefault is not a function error and align your setup with Storybook 9.x best practices.
More details and code samples are in the official migration docs and 9.x migration guide.

To reply, just mention @dosu.

---

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

[yannbf]

Hey @ravindraguptacapgemini we just released Storybook 10. Can you try upgrading and seeing whether the issue is resolved? And please provide reproduction repo if you can. Thank you.

[ravindraguptacapgemini]

@yannbf do you mean the previous bot response is not correct, we will try to use storybook 10 and I hope that storybook is still compatible for React Native and Webpack5 together in one setup.