Vite Plugin React Native Web

3.1.2 verified Mon Apr 27 auth: no javascript

A Vite plugin that adds React Native Web support to Vite projects. It strips Flow types, aliases `react-native` to `react-native-web`, and transforms .js files as .jsx using ESBuild. Current stable version is 3.1.2, with a moderate release cadence. Key differentiators: first-class Vite integration, supports Expo and non-Expo projects, and defines global variables like `__DEV__` and `process.env.EXPO_OS`. Requires `react-native-web` and `inline-style-prefixer` as peer dependencies.

Common errors

error Error: Cannot find module 'react-native-web' ↓

cause Missing peer dependency react-native-web.

fix

Run npm install react-native-web or pnpm add react-native-web.

error Error: Module "vite-plugin-react-native-web" has been externalized for browser compatibility ↓

cause Using this plugin in a browser context (e.g., Vite SSR) incorrectly.

fix

Ensure this plugin is only used in the Vite config's plugins array, not imported in browser code.

error TypeError: Cannot read properties of undefined (reading 'split') ↓

cause The plugin encountered a file that is not a valid React Native module.

fix

Check that your source files are properly structured and use standard react-native imports.

Warnings

breaking Vite 8 support requires v3.0.0+. Older versions (v2.x) are incompatible with Vite 8. ↓

fix Upgrade vite-plugin-react-native-web to >=3.0.0.

deprecated The 'expo' option for manualChunks was disabled by default in v2.7.0. ↓

fix If you rely on Expo's manualChunks, re-enable via plugin options: reactNativeWeb({ expo: { manualChunks: true } }).

gotcha Peer dependencies (react-native-web, inline-style-prefixer) must be in the app's own node_modules directory, especially with pnpm or workspaces. ↓

fix Run `pnpm add react-native-web inline-style-prefixer` in the app directory.

gotcha The plugin transforms files with .js extension as .jsx; ensure your JS files are valid JSX to avoid parsing errors. ↓

fix Rename .js files containing JSX to .jsx or configure ESBuild loader.

breaking Incorrect CommonJS resolution fixed in v3.1.0; previous versions may have issues with some dependencies. ↓

fix Upgrade to v3.1.0+.

Install

npm install vite-plugin-react-native-web

yarn add vite-plugin-react-native-web

pnpm add vite-plugin-react-native-web

Imports

default

wrong

const reactNativeWeb = require('vite-plugin-react-native-web')

correct

import reactNativeWeb from 'vite-plugin-react-native-web'

ESM-only; CommonJS require will fail in Vite configs that use ESM.

reactNativeWeb (named)

wrong

import reactNativeWebPlugin from 'vite-plugin-react-native-web'

correct

import { reactNativeWeb } from 'vite-plugin-react-native-web'

Named export available since v3; default export is the function itself.

defineConfig

wrong

import { defineConfig } from 'vite-plugin-react-native-web'

correct

import { defineConfig } from 'vite'

defineConfig is from Vite, not this plugin.

Quickstart

This shows how to install and configure the plugin in a Vite project with TypeScript.

// vite.config.ts
import { defineConfig } from 'vite';
import reactNativeWeb from 'vite-plugin-react-native-web';

export default defineConfig({
  plugins: [
    reactNativeWeb({
      // Optional: customize global variable definitions
      // variables: {
      //   __DEV__: true,
      //   'process.env.EXPO_OS': '"web"',
      // },
    }),
  ],
});