Laravel Echo未定义问题求助：已引入echo.min.js仍报错

方案一：移除检测脚本的type="module"属性 #

将检测脚本改为普通全局脚本，即可正常访问window.Echo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Laravel Echo</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/7.0.3/pusher.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.16.1/echo.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (window.Echo) {
                console.log('Laravel Echo is loaded');
            } else {
                console.error('Laravel Echo is not loaded');
            }
        });
    </script>
</body>
</html>

原因：type="module"的脚本运行在独立的模块作用域中，你引入的echo.min.js是UMD格式，在模块环境下可能不会自动挂载到全局window对象。改为普通脚本后，运行在全局作用域，就能直接访问挂载好的window.Echo。

方案二：使用ES模块方式导入（保留type="module"） #

如果需要继续使用模块脚本，改用ES模块版本的Laravel Echo和Pusher，通过import导入并处理依赖：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Laravel Echo</title>
</head>
<body>
    <script type="module">
        import Pusher from 'https://cdnjs.cloudflare.com/ajax/libs/pusher/7.0.3/pusher.min.mjs';
        import Echo from 'https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.16.1/echo.esm.min.js';

        // 将Pusher挂载到全局，满足Laravel Echo的依赖要求
        window.Pusher = Pusher;

        console.log('Laravel Echo is loaded');
        // 可在此处初始化Echo实例
        // const echoInstance = new Echo({
        //     broadcaster: 'pusher',
        //     key: '你的Pusher密钥',
        //     cluster: '你的Pusher集群'
        // });
    </script>
</body>
</html>

原因：ES模块版本的库不会自动挂载到全局，需要手动导入；同时Laravel Echo依赖全局的Pusher对象，所以需要将导入的Pusher挂载到window。

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