{"id":14234,"library":"vite-dev-rpc","title":"Vite Dev RPC","description":"vite-dev-rpc provides a remote procedure call (RPC) mechanism for seamless client-server communication within Vite plugins. It enables developers to define functions on the server-side (Vite plugin context) and invoke them directly from the client-side code, facilitating complex interactions during development. The package is currently at version 1.1.0, actively maintained, with releases primarily focused on supporting new major versions of Vite. It leverages `birpc` for the underlying message-based RPC, `vite-hot-client` to access `import.meta.hot` at runtime, and Vite's `import.meta.hot.send` API for server-client messaging. Its key differentiator is its tight integration with the Vite development server's HMR context, making it a robust solution for enhancing developer tools and features within Vite projects.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/antfu/vite-dev-rpc","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-dev-rpc","lang":"bash","label":"npm"},{"cmd":"yarn add vite-dev-rpc","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-dev-rpc","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vite plugin functionality and HMR context.","package":"vite","optional":false}],"imports":[{"note":"ESM-only package, CommonJS require is not supported. Use named import for server-side RPC setup in Vite plugins.","wrong":"const { createRPCServer } = require('vite-dev-rpc')","symbol":"createRPCServer","correct":"import { createRPCServer } from 'vite-dev-rpc'"},{"note":"ESM-only. This function is typically used in client-side code to connect to the RPC server exposed by the Vite plugin. It is a named export.","wrong":"import createRPCClient from 'vite-dev-rpc'","symbol":"createRPCClient","correct":"import { createRPCClient } from 'vite-dev-rpc'"},{"note":"TypeScript type import for configuring the RPC client or server. Always use `import type`.","symbol":"ViteDevRpcOptions","correct":"import type { ViteDevRpcOptions } from 'vite-dev-rpc'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport { createRPCServer, createRPCClient } from 'vite-dev-rpc';\n\n// --- Vite Plugin (Server-side) ---\nconst myVitePlugin = () => {\n  const rpc = createRPCServer('my-rpc-channel', {\n    multiply(a: number, b: number) {\n      console.log('Server received multiplication request');\n      return a * b;\n    },\n    greet(name: string) {\n      console.log('Server received greeting request');\n      return `Hello, ${name} from Vite server!`;\n    },\n  });\n\n  return {\n    name: 'my-rpc-plugin',\n    configureServer(server) {\n      server.ws.on('connection', (socket) => {\n        // Expose RPC methods to the client via Vite's WebSocket\n        rpc.update(socket);\n      });\n    },\n    // In case you need to send messages from server to client\n    // You can access rpc.send() or rpc.broadcast() here or from a configured client\n  };\n};\n\nexport default defineConfig({\n  plugins: [myVitePlugin()],\n});\n\n// --- Client-side (e.g., in a .js or .ts file loaded by Vite) ---\nasync function setupClientRPC() {\n  // Ensure import.meta.hot is available\n  if (import.meta.hot) {\n    const clientRpc = createRPCClient<typeof serverMethods>('my-rpc-channel', import.meta.hot);\n\n    try {\n      const result = await clientRpc.multiply(5, 7);\n      console.log('Client received multiplication result:', result); // Expected: 35\n\n      const greeting = await clientRpc.greet('Vite User');\n      console.log('Client received greeting:', greeting); // Expected: \"Hello, Vite User from Vite server!\"\n    } catch (error) {\n      console.error('RPC client error:', error);\n    }\n  } else {\n    console.warn('Vite HMR is not available, RPC client cannot be initialized.');\n  }\n}\n\n// Define types for server methods for client-side type safety\ninterface serverMethods {\n  multiply(a: number, b: number): number;\n  greet(name: string): string;\n}\n\nsetupClientRPC();\n","lang":"typescript","description":"This quickstart demonstrates how to set up a `vite-dev-rpc` server within a Vite plugin and establish a client connection from the browser, allowing remote procedure calls for `multiply` and `greet` methods."},"warnings":[{"fix":"Check your `vite` version and update your `package.json` to install a compatible version, then run `npm install` or `yarn install`.","message":"vite-dev-rpc is tightly coupled with Vite's internal HMR client and server APIs. Ensure your `vite` peer dependency matches the supported versions (`^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0`). Mismatches can lead to `import.meta.hot` context issues or WebSocket errors.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Ensure the client-side code where `createRPCClient` is called is served and processed by Vite's development server. Wrap client RPC setup in a check like `if (import.meta.hot) { ... }`.","message":"The `createRPCClient` function requires `import.meta.hot` to be available. This object is only present in a module that is part of the Vite HMR graph. If you try to use `createRPCClient` in a non-HMR context (e.g., a vanilla Node.js script not processed by Vite), it will fail or `import.meta.hot` will be undefined.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Periodically update `vite-dev-rpc` to its latest version when upgrading Vite to maintain compatibility and benefit from bug fixes and new features.","message":"When migrating to newer Vite versions, always check `vite-dev-rpc` release notes. Although `v1.0.7` adopted 'Epoch SemVer' without immediate breaking changes, subsequent Vite updates (e.g., Vite 3, 5, 7 support in `v0.1.0`, `v0.1.4`, `v1.1.0` respectively) might necessitate updating `vite-dev-rpc` to ensure compatibility with underlying Vite HMR API changes.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"search_vec":"'1.1.0':59 'access':88 'activ':60 'api':96 'base':81 'birpc':75 'call':12 'client':18,45,86,100 'client-serv':17 'client-sid':44 'code':47 'communic':20 'complex':49 'context':37,116 'current':56 'defin':28 'dev':2,6 'develop':26,52,112,124 'differenti':104 'direct':41 'enabl':25 'enhanc':123 'facilit':48 'featur':127 'focus':65 'function':29 'hmr':115 'hot':85 'import.meta.hot':89 'import.meta.hot.send':95 'integr':108 'interact':50 'invok':39 'javascript':131 'key':103 'leverag':74 'maintain':61 'major':69 'make':117 'mechan':14 'messag':80,101 'message-bas':79 'new':68 'packag':54 'plugin':23,36 'primarili':64 'procedur':11 'project':130 'provid':8 'releas':63 'remot':10 'robust':120 'rpc':3,7,13,82 'runtim':91 'seamless':16 'server':19,33,99,113 'server-cli':98 'server-sid':32 'side':34,46 'solut':121 'support':67 'tight':107 'tool':125 'typescript':132 'under':78 'version':58,70 'vite':1,5,22,35,72,84,93,111,129 'vite-dev-rpc':4 'vite-hot-cli':83 'within':21,128","created_at":"2026-04-20T01:58:38.479039+00:00","updated_at":"2026-04-20T01:58:38.479039+00:00","problems":[{"fix":"Verify that `server.ws` (for `createRPCServer`) or `import.meta.hot` (for `createRPCClient`) is correctly passed and that your `vite` version satisfies `vite-dev-rpc`'s peer dependency requirements.","cause":"The `createRPCServer` or `createRPCClient` is not correctly initialized with the Vite WebSocket server or `import.meta.hot` context, or the `vite` peer dependency is incompatible.","error":"TypeError: Cannot read properties of undefined (reading 'on') or 'send'"},{"fix":"Ensure each `createRPCServer` and `createRPCClient` pair uses a unique `channel` string identifier across your application to prevent conflicts.","cause":"Attempting to create multiple RPC servers or clients with the same channel name in the same context, leading to a naming collision.","error":"Error: [vite-dev-rpc] Channel \"my-channel\" is already registered. Make sure you use unique channel names."},{"fix":"Double-check that the method name exists on the server-side RPC definition (`createRPCServer` methods object) and that the client is calling it with the correct arguments and type signature.","cause":"The client attempted to call an RPC method that was not defined or properly exposed by the RPC server, or there's a type mismatch in the method signature.","error":"RPC Client error: TypeError: rpcMethod is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/antfu/vite-dev-rpc","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-dev-rpc","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","http-networking","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}