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

[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

Slot module, and it is working as expected.

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')));
}

[vitorcamachoo]

Found that importing from the dist folder it works. The downside of this implementation is that using NativeWind, the className does not work, forcing us to remapProps (style => className) for each component layer.

import * as AvatarPrimitive from '@rn-primitives/avatar/dist/avatar';

[kapoor-ritesh]

Facing exactly similar issue with import * as LabelPrimitive from '@rn-primitives/label';

[gamegee]

Same issue here importing import * as Slot from '@rn-primitives/slot'

[rwitchell]

@mrzachnugent - difficult to use react native reusables which relies on this library, because we can't render stories using the components (label, switch, avatar, etc). Any help we can provide to help you track down and fix the issue?

[rwitchell]

the issue seems to be rn-primitives is creating .web variants of the components, but not exporting them publicly, so storybook React native is working, but storybook web fails with these components.
I've created another issue, but in the mean time, if you need a solution @gamegee , @kapoor-ritesh @vitorcamachoo , try this:

.storybook/main.ts

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

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  // the below is causing a 'require is not defined' console error
  // return dirname(require.resolve(join(value, 'package.json')))
  return value
}
const config: StorybookConfig = {
  stories: ['../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    getAbsolutePath('@storybook/addon-docs'),
    '@storybook/addon-vitest',
    getAbsolutePath('@storybook/addon-a11y'),
  ],
  framework: {
    name: getAbsolutePath('@storybook/react-native-web-vite'),
    options: {
      pluginReactOptions: {
        babel: {
          plugins: [
            '@babel/plugin-proposal-export-namespace-from',
            'react-native-reanimated/plugin',
          ],
        },
        jsxImportSource: 'nativewind',
      },
    },
  },

  viteFinal: async (config, { configType }) => {
    // Configure esbuild to handle JSX in .mjs files for dev mode (optimizeDeps)
    if (config.optimizeDeps) {
      config.optimizeDeps.esbuildOptions = {
        ...config.optimizeDeps.esbuildOptions,
        loader: {
          '.js': 'jsx',
          '.mjs': 'jsx',
          ...config.optimizeDeps.esbuildOptions?.loader,
        },
      }
      // Add include for problematic packages
      config.optimizeDeps.include = [
        ...(config.optimizeDeps.include || []),
        'warn-once',
        '@radix-ui/react-radio-group',
        '@radix-ui/react-label',
        '@radix-ui/react-accordion',
        '@radix-ui/react-dialog',
        '@radix-ui/react-checkbox',
        '@radix-ui/react-collapsible',
        '@radix-ui/react-switch',
        '@radix-ui/react-tooltip',
        '@radix-ui/react-progress',
        '@radix-ui/react-portal',
        '@radix-ui/react-tabs',
        '@radix-ui/react-toggle',
      ]
    } else {
      config.optimizeDeps = {
        esbuildOptions: {
          loader: {
            '.js': 'jsx',
            '.mjs': 'jsx',
          },
        },
        include: [
          'warn-once',
          '@radix-ui/react-radio-group',
          '@radix-ui/react-label',
          '@radix-ui/react-accordion',
          '@radix-ui/react-dialog',
          '@radix-ui/react-checkbox',
          '@radix-ui/react-collapsible',
          '@radix-ui/react-switch',
          '@radix-ui/react-tooltip',
          '@radix-ui/react-progress',
          '@radix-ui/react-portal',
          '@radix-ui/react-tabs',
          '@radix-ui/react-toggle',
        ],
      }
    }

    // Configure CSS processing for Tailwind
    config.css = {
      ...config.css,
      postcss: {
        plugins: [require('tailwindcss'), require('autoprefixer')],
      },
    }

    // Ensure React Native components work properly with React Native Web
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        'react-native$': 'react-native-web',
        // Fix warn-once ESM import issue
        'warn-once': require.resolve('./rn-primitives-shims/warn-once.js'),
        // Use shim files to load web versions of RN-primitives
        '@rn-primitives/accordion': require.resolve('./rn-primitives-shims/accordion.jsx'),
        '@rn-primitives/alert-dialog': require.resolve('./rn-primitives-shims/alert-dialog.jsx'),
        '@rn-primitives/checkbox': require.resolve('./rn-primitives-shims/checkbox.jsx'),
        '@rn-primitives/collapsible': require.resolve('./rn-primitives-shims/collapsible.jsx'),
        '@rn-primitives/context-menu': require.resolve('./rn-primitives-shims/context-menu.jsx'),
        '@rn-primitives/dialog': require.resolve('./rn-primitives-shims/dialog.jsx'),
        '@rn-primitives/dropdown-menu': require.resolve('./rn-primitives-shims/dropdown-menu.jsx'),
        '@rn-primitives/hover-card': require.resolve('./rn-primitives-shims/hover-card.jsx'),
        '@rn-primitives/label': require.resolve('./rn-primitives-shims/label.jsx'),
        '@rn-primitives/menubar': require.resolve('./rn-primitives-shims/menubar.jsx'),
        '@rn-primitives/navigation-menu': require.resolve(
          './rn-primitives-shims/navigation-menu.jsx',
        ),
        '@rn-primitives/popover': require.resolve('./rn-primitives-shims/popover.jsx'),
        '@rn-primitives/portal': require.resolve('./rn-primitives-shims/portal.jsx'),
        '@rn-primitives/progress': require.resolve('./rn-primitives-shims/progress.jsx'),
        '@rn-primitives/radio-group': require.resolve('./rn-primitives-shims/radio-group.jsx'),
        '@rn-primitives/select': require.resolve('./rn-primitives-shims/select.jsx'),
        '@rn-primitives/switch': require.resolve('./rn-primitives-shims/switch.jsx'),
        '@rn-primitives/tabs': require.resolve('./rn-primitives-shims/tabs.jsx'),
        '@rn-primitives/toggle': require.resolve('./rn-primitives-shims/toggle.jsx'),
        '@rn-primitives/toggle-group': require.resolve('./rn-primitives-shims/toggle-group.jsx'),
        '@rn-primitives/tooltip': require.resolve('./rn-primitives-shims/tooltip.jsx'),
      },
      extensions: ['.web.tsx', '.web.ts', '.web.js', '.web.mjs', '.web.cjs', '.tsx', '.ts', '.js'],
      // Use condition names to prioritize web versions of RN-primitives
      conditionNames: ['react-native', 'browser', 'import', 'require', 'default'],
      mainFields: ['react-native', 'browser', 'module', 'main'],
    }

    return config
  },
}
export default config

and here is a git patch with all of the web components copied from rn-primitives:
https://gist.github.com/rwitchell/281bce2c8861ee2d6c62a61b17224b76

[dannyhw]

Hey first just wanted to clarify this isn't actually an issue with storybook its an issue with loading rn-primitives using vite. You can reproduce this without storybook by configuring using vite-plugin-rnw

Theres an issue also where I wasn't forcing mjs to be jsx and not resolving .web.mjs before .js. This causes problems because the cjs bundle seems to break on vite.

The way that js is bundled for rn-primitives seems to clash with using vite

for example
.js files being cjs, usually .js can be mjs and use .cjs for commonjs - though generally I'm not sure why cjs is being included here at all

@rwitchell can you explain what you are aliasing there?

[dannyhw]

I'm pushing some fixes for most of the problems here:
dannyhw/vite-plugin-rnw#4

however I still have to manually call remapProps for some reason to make the className prop work for the rn primitives

[rwitchell]

Thanks for investigating, Danny.

@rwitchell can you explain what you are aliasing there?

It was a simple work around by providing a shim anytime storybook requested an rn-primitive component, I rebuilt the original web component and moved it to a local shim folder, and provided that to storybook instead. This allowed my stories to render, but it's only a temporary workaround.

[dannyhw]

vite-plugin-rnw 0.0.10 has fixes for rn-primitives

if you use the latest storybook 10 version and override vite-plugin-rnw to 0.0.10 then it should work without patches or overriding vite config