Currently, I am working on developing an application using VueJS 3, and everything seems to be functioning well on my local machine. However, I also need it to work smoothly on older browsers such as Firefox 38 and Chrome 49.
The app utilizes various "fetch" functions for loading content from APIs, authentication, sending commands, etc. After going through the resources provided in the following two links - Fetch API and Babel not Polyfilling Fetch when using babel-preset-env, I suspect there might be compatibility issues (even though it is supposed to work with CH 42). What are your thoughts on this?
In my package.json file, I have set up Babel with the following configurations:
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"Chrome > 48",
]
However, I am encountering cryptic errors in Firefox and Chrome, and I'm unsure how to transpile that function properly. My primary focus would be on Chrome 49, and here is some additional context:
It appears that the async function is supported after Chrome version 55, but the conversion process eludes me: Async Function Documentation
For instance, while testing on Chrome 49, I encountered the following console error on a specific page: webpack:///./node_modules/@vue/devtools-api/esm/proxy.js
Uncaught SyntaxError: Unexpected identifier proxy.js:94
The code snippet causing this error reads as follows:
import { HOOK_PLUGIN_SETTINGS_SET } from './const';
// ...remaining code block...
In an attempt to investigate and resolve the issue, I made modifications in different areas like vue.config.js and package.json:
vue.config.js
transpileDependencies: [
"config",
"vue",
"vue-router",
"vuex",
"xml2js"
],
package.json
// Dependencies section with relevant libraries and versions
// DevDependencies section with various tools and plugins being used
// browserslist configuration specifying Chrome version 48
babel.config.js
module.exports = {
presets: [
[
'@vue/cli-plugin-babel/preset',
{
useBuiltIns: "usage",
forceAllTransforms: true,
targets: {
"chrome": "49"
},
}
]
]
};
main.js
import "@babel/polyfill";
import 'core-js/stable';
import 'regenerator-runtime/runtime';
// Further imports and setup statements