Skip to content

[ BUG ] @rn-primitives/avatar not working with storybook #378

Open
@vitorcamachoo

Description

@vitorcamachoo

Describe the bug
When importing Avatar in storybook react native web using vite, I got the import as an empty object. I am also using the

Image

Slot module, and it is working as expected.
Image

Here is the storybook configuration:

import { dirname, join } from 'path';
import type { StorybookConfig } from '@storybook/react-native-web-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  framework: {
    name: '@storybook/react-native-web-vite',
    options: {
      pluginReactOptions: {
        jsxImportSource: 'nativewind',
        babel: {
          plugins: [
            require.resolve('@babel/plugin-proposal-export-namespace-from'),
            require.resolve('react-native-reanimated/plugin'),
          ],
        },
      },
    },
  },

  addons: [
    getAbsolutePath('@storybook/addon-docs'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-themes'),
  ],

  docs: {
    autodocs: true,
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
  viteFinal(config) {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        'react-native-svg': require.resolve('react-native-svg'),
      },
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    };

    config.optimizeDeps = {
      ...config.optimizeDeps,
      esbuildOptions: {
        loader: {
          '.js': 'jsx',
          '.mjs': 'jsx',
          '.ts': 'tsx',
          '.tsx': 'tsx',
        },
      },
    };

    return config;
  },
};
export default config;

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions