Vite setup for React Native Web

index.html

<style>
  html,
  body {
    height: 100%;
  }

  #root {
    display: flex;
    height: 100%;
  }
</style>
<div id="root"></div>
<script type="module" src="./index.tsx"></script>
<script type="module">
  import { AppRegistry } from 'react-native';

  AppRegistry.runApplication('main', {
    initialProps: {},
    rootTag: document.getElementById('root'),
  });
</script>

vite.config.mjs

import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow';
import react from '@vitejs/plugin-react';
import commonjs from 'vite-plugin-commonjs';

const extensions = [
  '.web.tsx',
  '.tsx',
  '.web.ts',
  '.ts',
  '.web.jsx',
  '.jsx',
  '.web.js',
  '.js',
  '.web.mjs',
  '.mjs',
  '.json',
];

const jsx = (regex) => ({
  name: 'js-as-jsx',
  enforce: 'pre',
  async transform(code, id) {
    if (id.endsWith('.js') && regex.test(id)) {
      return transformWithEsbuild(code, id, {
        loader: 'jsx',
        jsx: 'automatic',
      });
    }

    return null;
  },
});

/** @type {import('vite').UserConfig} */
export default {
  plugins: [jsx(/\/(@expo|expo-.+)\//), commonjs(), react(), flowPlugin()],
  define: {
    '__DEV__': JSON.stringify(process.env.NODE_ENV !== 'production'),
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    'process.env.EXPO_OS': JSON.stringify('web'),
    'global': 'globalThis',
  },
  resolve: {
    extensions: extensions,
    alias: {
      'react-native': 'react-native-web',
    },
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      resolveExtensions: extensions,
      jsx: 'automatic',
      loader: {
        '.js': 'jsx',
      },
      plugins: [esbuildFlowPlugin(undefined, () => 'jsx')],
    },
  },
};