I'm having a bit of trouble with getting my project to work on IE11 and Edge
You can view it here: https://tagfireandsecurity.co.uk/
THE PROBLEMS
IE11: Blank page, shows multiple errors:
SCRIPT1002: Syntax error
firebase-app.js (1,1)
SCRIPT1002: Syntax error
firebase-analytics.js (1,1)
SCRIPT1002: Syntax error
init.js (1,1)
SCRIPT5043: Accessing the 'caller' property of a function or arguments object is not allowed in strict mode
eval code (3959) (15268,9)
SCRIPT5022: SecurityError
sockjs.js (1684,3)
Edge: Loads the website, however its all messed up. For example the grid is not working and my carousels aren't working. Also shows some errors:
SCRIPT65535: SCRIPT65535: Invalid calling object
WHAT I'VE DONE SO FAR
I tried to make sure babel will polyfill which I don't even know if it's doing it to be honest, I followed the documentation on their website and I don't think its working.
I also tried to add transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video'] to polyfill my plugins but I don't think that is doing anything either.
I also added an autoprefixer and I believe that is working because the SCSS to CSS output now has all the prefixes in it, so why it's not working in EDGE? I don't know. Inspecting it in Edge shows it has the prefixes there, sometimes just disabling the prefix and putting it back on again fixes it so I'm very confused.
Here are my config files:
babel.config.js
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es.promise',
'es.symbol'
]
}]
]
};
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}],
vue: {
// configure autoprefixer
autoprefixer: {
browsers: ['last 2 versions']
}
}
}
}
vue.config.js
// vue.config.js
module.exports = {
transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video']
}
main.ts
import "core-js/stable";
import "regenerator-runtime/runtime";
require('intersection-observer');
import "regenerator-runtime/runtime";
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@fortawesome/fontawesome-free/css/all.css";
import VueMq from "vue-mq";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import VueCarousel from "vue-carousel";
import "animate.css/animate.css";
import * as firebase from "firebase";
import VueLazyLoadVideo from "vue-lazyload-video";
require("intersection-observer");
require("matchmedia-polyfill");
require("matchmedia-polyfill/matchMedia.addListener");
import "lazysizes";
import "lazysizes/plugins/parent-fit/ls.parent-fit";
import "lazysizes/plugins/blur-up/ls.blur-up";
// Register Components
// LazyVideo & LazyVideoAsGIF
Vue.use(VueLazyLoadVideo);
const firebaseConfig = {
HIDDEN CONFIG FOR STACKOVERFLOW
};
firebase.initializeApp(firebaseConfig);
Vue.use(VueCarousel);
gsap.registerPlugin(ScrollTrigger);
Vue.use(VueMq, {
breakpoints: {
// default breakpoints - customize this
sm: 480,
md: 921,
lg: 1024
}
});
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({})
]
};
package.json
{
"name": "tag",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@firebase/polyfill": "^0.3.36",
"@fortawesome/fontawesome-free": "^5.13.0",
"animate.css": "^4.1.0",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"firebase": "^7.15.5",
"gsap": "^3.4.0",
"intersection-observer": "^0.11.0",
"lazysizes": "^5.2.2",
"matchmedia-polyfill": "^0.3.2",
"uuid": "^8.2.0",
"vue": "^2.6.11",
"vue-carousel": "^0.18.0",
"vue-class-component": "^7.2.3",
"vue-lazyload-video": "^0.1.15",
"vue-mq": "^1.0.1",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@babel/preset-env": "^7.10.4",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "^4.4.6",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-plugin-typescript": "~4.4.0",
"@vue/cli-plugin-vuex": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"autoprefixer": "^9.8.5",
"cssnano": "^4.1.10",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"fork-ts-checker-webpack-plugin": "^5.0.5",
"google-auth-library": "^6.0.5",
"node-sass": "^4.12.0",
"postcss-import": "^12.0.1",
"postcss-load-config": "^2.1.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"sugarss": "^2.0.0",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {}
},
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"allowJs": true,
"strict": false,
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Sorry to say this, you can't render a website built with JS based framework (VUE, ReactJS etc) in IE, and the JS engine of Edge (non-chromium) is not capable of handling all features of ES6 standard. If the customer wants to use your website on a Microsoft based browser, then they have to switch to the latest Edge based on Chromium.