I want to share a new Vite plugin called vite-plugin-rnw that I have developed to make it easier to run React Native Web in web environments and encourage you to try it. Before introducing the plugin, I briefly explain the history and challenges that motivated its creation.
A few years ago, I published a Storybook addon that allowed configuring React Native Web projects using Webpack. The idea came about after seeing someone achieve a custom configuration, and that led me to experiment with multiple Webpack adjustments until I found a solution that worked with Storybook. That experience was useful but also showed the limitations of relying on Webpack in an ecosystem moving toward faster tools like Vite.
Over time, Storybook incorporated builders that allowed choosing other bundlers, and the Vite builder gained a lot of traction, becoming the recommended one. As a result, I tried to adapt the React Native Web experience to Vite, which meant facing several key differences between Metro, the usual bundler for React Native, and browser-oriented bundlers.
Among the most relevant differences are that Metro transpiles everything including node_modules, converts code to the format expected by React Native's JavaScript engine, supports specific extensions and resolutions like .web, and usually relies on Babel transformations. That reality forces you to make specific decisions when porting projects to Vite.
The main technical requirements for React Native Web to work with Vite are the following, explained in a practical way: alias react-native to react-native-web; resolve files with the .web.js extension first; define global variables that many libraries expect at runtime; transpile with Babel including certain packages in node_modules; remove Flow syntax; treat .js as .jsx when necessary; and handle mixes of CommonJS and ESM that are common in React Native ecosystem libraries.
Trying to solve all of that with Vite's standard plugins can get complicated, especially because many React and dependency optimization plugins avoid processing files inside node_modules for performance. My initial approach was to combine the React plugin with a Babel plugin to force the transformation of certain modules, but that meant maintaining two Babel configurations and was inconvenient for end users.
The cleaner alternative was to create a specific plugin that extends the behavior of the React plugin to automatically include the necessary transformations for react-native and expo. That plugin is vite-plugin-rnw, and its goal is to offer a ready-to-use configuration that simplifies getting React Native Web up and running with Vite and with Storybook on Vite.
With vite-plugin-rnw, the main tasks are automated: aliasing react-native to react-native-web, prioritizing .web resolutions, defining global variables like __DEV__ and process.env.NODE_ENV so libraries work correctly, and applying Babel transformations to the necessary modules inside node_modules. Solutions are also integrated to remove Flow syntax and to handle files that mix CommonJS and ESM.
Beyond the technical details, I want to highlight that there are complementary plugins that help polish the result: a plugin to remove Flow types during the dependency optimization step, a plugin to handle CommonJS files within Vite, and options to force files with the .js extension to be processed as .jsx when required. These combined components make it easier for React Native Web to work stably both in development and in production builds.
If you are interested in a complete and ready-to-use approach, you can install vite-plugin-rnw and apply it in the Vite configuration to get a functional environment with little effort. For examples and advanced configuration, I recommend reviewing the example repository that accompanies the project, where a consolidated configuration for real cases is shown.
At Q2BSTUDIO, we are a custom software and application development company specialized in offering modern technological solutions. Our services include custom software development, custom applications, artificial intelligence consulting, cybersecurity projects, AWS and Azure cloud services, business intelligence services, and Power BI implementations. We apply artificial intelligence and AI for companies by integrating AI agents and personalized solutions that improve processes and analytics.
If your organization works with React Native or wants to bring mobile components to the web using React Native Web, we can help integrate tools like Vite and plugins like vite-plugin-rnw into development, testing, and deployment workflows. We offer custom software to integrate CI/CD pipelines, optimize performance, and ensure compliance with good practices in cybersecurity and identity management.
We also develop business intelligence and Power BI projects to transform data into actionable dashboards, and we combine AWS and Azure cloud services to scale applications and artificial intelligence models. If you are looking for custom AI agents for customer service, automation, or analysis, or AI solutions for companies that include custom models, at Q2BSTUDIO we have expert teams in AI and in the integration of custom software solutions.
If you want to collaborate, improve, or adapt vite-plugin-rnw in your project, we can offer support, performance audits, and development of custom solutions that integrate this plugin with Storybook, testing pipelines, and cloud deployments. To check implementation examples or request a quote for custom software, contact the Q2BSTUDIO team and we will guide you according to your needs.
Useful technical references and repositories: search for vite-plugin-rnw on npm and review the example repository rn web vite example on GitHub to see a complete configuration. For corporate inquiries about projects with React Native Web, artificial intelligence, cybersecurity, AWS and Azure cloud services, business intelligence services, AI agents, Power BI, and custom application development, get in touch with Q2BSTUDIO and we will start designing a solution tailored to your case.
Thank you for reading, and I hope this guide and the vite-plugin-rnw plugin make your work with React Native Web on Vite easier. If you want us at Q2BSTUDIO to collaborate on the integration or on custom software development with artificial intelligence and cybersecurity, we are available to help you.
