For a signage project we need developed a player for LG signage devices. At the time we focused on support for WebOs Signage 4.0 which uses Chrome 53 engine. However now the request arises to also support WebOs Signage 3.2 which uses Chrome 38.
When using modern JavaScript and the Vue.js 3 library we get things working when compiling code for Chrome 53 (which is in LG Web OS 4.x) but not for Chrome 38.
Testing in that browser isn't easy. I can't find a way to install Chrome 38. It is possible to test on browserstack.com so I purchased a month account for that site.
When troubleshooting there was an error in the code below on line 4 (importing vue).
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babel-polyfill */ "./node_modules/babel-polyfill/lib/index.js");
/* harmony import */ var babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
/* harmony import */ var _lg_player_App__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./lg-player/App */ "./resources/js/lg-player/App.vue");
/* harmony import */ var _css_lg_player_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../css/lg-player.css */ "./resources/css/lg-player.css");
However when setting these options in webpack and defining browserslist to Chrome 38 the error moves to line 5 (importing the App.vue SFC).
return {
module: {
rules: [
{
test: /\.js?$/,
use: [{
loader: 'babel-loader'
}]
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
I would assume that the vue single file component isn't transpiled correctly.
I also read in the docs for Vue that it only works in ES2015 supported browsers (https://vuejs.org/about/faq.html#what-browsers-does-vue-support) and apparently some things can't even be transpiled. Obviously Chrome 38 doesn't support ES2015. But what confuses me is that with the babel-loader activated it passes line 4 and moves on to line 5. So I assume the line to import vue was successful but the import of App.vue wasn't. With the code above the script part of the .vue files should be transpiled correctly so why isn't that running in the browser...
I've tried some polyfill solutions (polyfill.io, https://laravel-mix.com/extensions/polyfill, ...) as well but unsuccessful.
Can anyone confirm that my attempts to make Vue3 code work in Chrome 38 are useless? Or am I not using the correct technique to make it happen?
Alternative is to build a new player with "simpler" JavaScript or "older" libraries I suppose.
Just checked the documentation How Reactivity Works in Vue:
There are two ways of intercepting property access in JavaScript: getter / setters and Proxies. Vue 2 used getter / setters exclusively due to browser support limitations. In Vue 3, Proxies are used for reactive objects and getter / setters are used for refs.
So Vue 3 uses Proxy, but Proxy can't be transpiled (see: Javascript Proxy support in Babel).
Or if you look at github.com/GoogleChrome/proxy-polyfill:
The polyfill supports just a limited number of proxy 'traps'. It also works by calling seal on the object passed to Proxy. This means that the properties you want to proxy must be known at creation time.
So even if you solve all other problems, you would be stuck at the Proxy part, so you won't be able to get Vue 3 running in Chrome older than 49 (see: caniuse: Proxy).
So IMHO your only option is to use Vue2 or something else that supports older browsers.