{"id":22803,"library":"vite-plugin-react-native-web","title":"Vite Plugin React Native Web","description":"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.","status":"active","version":"3.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/Bram-dc/vite-plugin-react-native-web","tags":["javascript","vite","vite-plugin","plugin","react-native","react-native-web","typescript"],"install":[{"cmd":"npm install vite-plugin-react-native-web","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-react-native-web","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-react-native-web","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core runtime replacement for react-native in web builds.","package":"react-native-web","optional":false},{"reason":"Required by react-native-web for CSS vendor prefixing.","package":"inline-style-prefixer","optional":false}],"imports":[{"note":"ESM-only; CommonJS require will fail in Vite configs that use ESM.","wrong":"const reactNativeWeb = require('vite-plugin-react-native-web')","symbol":"default","correct":"import reactNativeWeb from 'vite-plugin-react-native-web'"},{"note":"Named export available since v3; default export is the function itself.","wrong":"import reactNativeWebPlugin from 'vite-plugin-react-native-web'","symbol":"reactNativeWeb (named)","correct":"import { reactNativeWeb } from 'vite-plugin-react-native-web'"},{"note":"defineConfig is from Vite, not this plugin.","wrong":"import { defineConfig } from 'vite-plugin-react-native-web'","symbol":"defineConfig","correct":"import { defineConfig } from 'vite'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport reactNativeWeb from 'vite-plugin-react-native-web';\n\nexport default defineConfig({\n  plugins: [\n    reactNativeWeb({\n      // Optional: customize global variable definitions\n      // variables: {\n      //   __DEV__: true,\n      //   'process.env.EXPO_OS': '\"web\"',\n      // },\n    }),\n  ],\n});","lang":"typescript","description":"This shows how to install and configure the plugin in a Vite project with TypeScript."},"warnings":[{"fix":"Upgrade vite-plugin-react-native-web to >=3.0.0.","message":"Vite 8 support requires v3.0.0+. Older versions (v2.x) are incompatible with Vite 8.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"If you rely on Expo's manualChunks, re-enable via plugin options: reactNativeWeb({ expo: { manualChunks: true } }).","message":"The 'expo' option for manualChunks was disabled by default in v2.7.0.","severity":"deprecated","affected_versions":">=2.7.0"},{"fix":"Run `pnpm add react-native-web inline-style-prefixer` in the app directory.","message":"Peer dependencies (react-native-web, inline-style-prefixer) must be in the app's own node_modules directory, especially with pnpm or workspaces.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Rename .js files containing JSX to .jsx or configure ESBuild loader.","message":"The plugin transforms files with .js extension as .jsx; ensure your JS files are valid JSX to avoid parsing errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to v3.1.0+.","message":"Incorrect CommonJS resolution fixed in v3.1.0; previous versions may have issues with some dependencies.","severity":"breaking","affected_versions":"<3.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install react-native-web` or `pnpm add react-native-web`.","cause":"Missing peer dependency react-native-web.","error":"Error: Cannot find module 'react-native-web'"},{"fix":"Ensure this plugin is only used in the Vite config's plugins array, not imported in browser code.","cause":"Using this plugin in a browser context (e.g., Vite SSR) incorrectly.","error":"Error: Module \"vite-plugin-react-native-web\" has been externalized for browser compatibility"},{"fix":"Check that your source files are properly structured and use standard react-native imports.","cause":"The plugin encountered a file that is not a valid React Native module.","error":"TypeError: Cannot read properties of undefined (reading 'split')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}