在React中使用Laravel Echo与Pusher时遇Pusher未定义错误

问题核心 #

Laravel Echo 默认会尝试从全局作用域（window.Pusher）获取Pusher实例，但你的代码里虽然导入了pusher-js，却没让Echo正确访问到它——要么是全局挂载时机不对，要么是Echo初始化时没显式传入Pusher客户端。

修复步骤 #

1. 确认依赖安装完整

先确保已安装所需包：

npm install pusher-js laravel-echo
# 或使用yarn
yarn add pusher-js laravel-echo

2. 显式给Echo传入Pusher实例

修改初始化代码，通过client选项直接传入导入的Pusher，无需依赖全局变量：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import Echo from "laravel-echo";
import Pusher from "pusher-js";

declare global {
    interface Window {
        Echo: Echo;
        Pusher: typeof Pusher;
    }
}

// 可选：如果项目其他地方需要全局调用Pusher，挂载到window
window.Pusher = Pusher;

if (!window.Echo) {
    window.Echo = new Echo({
        broadcaster: "pusher",
        key: import.meta.env.VITE_PUSHER_APP_KEY,
        cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
        wsHost: window.location.hostname,
        wsPort: 6001,
        // 关键：直接传入Pusher客户端实例
        client: new Pusher(import.meta.env.VITE_PUSHER_APP_KEY, {
            cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
            wsHost: window.location.hostname,
            wsPort: 6001
        })
    });
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

3. 验证环境变量配置

检查.env文件中的Pusher参数是否正确，且Vite能正常读取：

VITE_PUSHER_APP_KEY=你的Pusher密钥
VITE_PUSHER_APP_CLUSTER=你的Pusher集群

补充说明 #

如果后端用了Laravel WebSockets这类自定义WebSocket服务，要保证wsHost和wsPort与后端配置完全一致，且服务器已正常启动。

内容的提问来源于stack exchange，提问作者mikoo1991_54