I currently have a yarn workspaces setup with two runtimes, one is for react-native and the other is react with react-native-web using ViteJS. Whenever I compile my project using yarn workspaces web build (equivalent of vite build), which is successful, I run yarn workspaces web preview (equivalent of vite preview) then I get the following error:

null is not an object (evaluating 'yt.current.useState')

When I run ViteJS in dev mode, everything works fine.

// vite.config.ts

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

const extensions = [
  ".web.tsx",
  ".tsx",
  ".web.ts",
  ".ts",
  ".web.jsx",
  ".jsx",
  ".web.js",
  ".js",
  ".css",
  ".json",
];

const development = process.env.NODE_ENV === "development";

export default defineConfig({
  clearScreen: true,
  plugins: [react()],
  define: {
    // https://github.com/bevacqua/dragula/issues/602#issuecomment-1296313369
    global: "window",
    __DEV__: JSON.stringify(development),
    // https://tamagui.dev/docs/intro/installation
    DEV: JSON.stringify(development),
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  },
  envDir: "../../",
  optimizeDeps: {
    esbuildOptions: {
      resolveExtensions: extensions,
      jsx: "automatic",
      loader: { ".js": "jsx" }
    }
  },
  resolve: {
    extensions,
    alias: {
      'react-native': 'react-native-web'
    }
  }
})

I updated every package to match the same react / react-native version, I also updated my vite.config.ts based on this GitHub Discussion (link).