Skip to main content

Vite (React)

To setup you must wrap your Vite react app with the ShuttleProvider like so:

import React from "react";
import ReactDOM from "react-dom/client";
import { ShuttleProvider } from "@delphi-labs/shuttle";
import App from "./App";
const providers = [
// ...
const mobileProviders = [
// ...
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<App />

Notice that the providers are defined outside the component to make sure those arrays are constant, this is a very important rule to follow.

Node polyfills‚Äč

Some frameworks require you to install node polyfills for Shuttle to work, for vite you need to complete the following extra steps:

npm install vite-plugin-node-polyfills

Then in your vite.config.ts add the polyfills plugin.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { nodePolyfills } from "vite-plugin-node-polyfills";
export default defineConfig({
plugins: [react(), nodePolyfills()],