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(
<React.StrictMode>
<ShuttleProvider
providers={providers}
mobileProviders={mobileProviders}
persistent
>
<App />
</ShuttleProvider>
</React.StrictMode>
);

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";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), nodePolyfills()],
});