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