1.7.0 release does not work in IE 11

• Echo Version: 1.7.0
• Laravel Version: 6.18.6
• PHP Version: 7.3
• NPM Version: 6.14.4
• Node Version: 10.20.1

Description:

When compiling a Laravel environment that includes the normal echo code in the app.js file, for example;

` import Echo from ‘laravel-echo’;

window.Pusher = require(‘pusher-js’);

window.Echo = new Echo({ broadcaster: ‘pusher’, key: process.env.MIX_PUSHER_APP_KEY, cluster: process.env.MIX_PUSHER_APP_CLUSTER, encrypted: true }); `

After compilation, viewing the page using IE11 results in a syntax error which points to this piece of code;

class Connector { /** * Create a new class instance. */ constructor(options) { /** * Default connector options. */ this._defaultOptions = { auth: { headers: {}, }, authEndpoint: '/broadcasting/auth', broadcaster: 'pusher', csrfToken: null, host: null, key: null, namespace: 'App.Events', }; this.setOptions(options); this.connect(); } /** * Merge the custom options with the defaults. */ setOptions(options) { this.options = Object.assign(this._defaultOptions, options); if (this.csrfToken()) { this.options.auth.headers['X-CSRF-TOKEN'] = this.csrfToken(); } return options; } /** * Extract the CSRF token from the page. */ csrfToken() { let selector; if (typeof window !== 'undefined' && window['Laravel'] && window['Laravel'].csrfToken) { return window['Laravel'].csrfToken; } else if (this.options.csrfToken) { return this.options.csrfToken; } else if (typeof document !== 'undefined' && typeof document.querySelector === 'function' && (selector = document.querySelector('meta[name="csrf-token"]'))) { return selector.getAttribute('content'); } return null; } }

Steps To Reproduce:

Build a basic laravel app with vue front end using the versions above. Add in the code above to include Echo in something like app.js Try to load the page in IE, it does not load Repeat the same process using version 1.6.1 of Echo, syntax error goes away and page loads

[derekmd]

I submitted a pull request today that will make echo.js again compile down to ES5 and it also includes the Object.assign() polyfill for IE11.

FYI, if this happens with other NPM packages where only an ES6 distribution is given, Laravel Mix has the ability to ES5-transpile that at the app level instead. Add the below snippet to your webpack.mix.js config to transpile node_modules/laravel-echo/**/*.js.

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules\/(?!(laravel-echo))/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: Config.babel()
                    }
                ]
            },
        ]
    }
});

[bengallienne]

So after a bit of digging around it seems that (for some reason), that piece of code is not getting transpiled down to native javascript in version 1.7.0 whereas it does in 1.6.1. In 1.7.0 the compiled file still has ES6 in it, which IE11 doesn’t understand. Have you changed how you are compiling the code at all?