Vite with React Native Web, TypeScript, and Material

Install Packages

npm init vite@latest vite-storybook-rnw -- --template react-ts
npm add react-native-web @types/react-native-web
npx sb init --builder @storybook/builder-vite
npx -p @storybook/cli sb init

Configure Vite

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'react-native': 'react-native-web',
    },
  },
})

Reference: https://github.com/necolas/react-native-web/discussions/2201#discussioncomment-1992245

Configure Storybook

// .storybook/main.js
const { loadConfigFromFile, mergeConfig } = require('vite')
const { resolve } = require('path')

module.exports = {
  // ...
  async viteFinal(config, { configType }) {
    const { config: userConfig } = await loadConfigFromFile(resolve(__dirname, '../vite.config.ts'))

    return mergeConfig(config, {
      ...userConfig,
      // manually specify plugins to avoid conflict
      plugins: [],
    })
  },
}

Reference: https://github.com/storybookjs/builder-vite/issues/85#issuecomment-900831050

Other References