0

My application doesn't work in IE11, in Chrome in FF works correctly. In IE11 it is displayed blank page. Result from IE debugger is below. Tried to solve it so many ways like by this. It's look like problem with polyfilling of vuetify but I'm not sure. Do you have any suggestions?

vue cli 3.8.2

build npx vue-cli-service build --mode development --modern

result from debugger: SCRIPT1003: Expected ':'

val("webpack_require.r(webpack_exports);\n/* harmony import / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0__ = webpack_require(/! ../../../src/components/VApp/VApp.sass / \"./node_modules/vuetify/src/components/VApp/VApp.sass\");\n/ harmony import / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0___default = /#PURE/webpack_require.n(_src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0__);\n/ harmony import / var _mixins_themeable__WEBPACK_IMPORTED_MODULE_1__ = webpack_require(/! ../../mixins/themeable / \"./node_modules/vuetify/lib/mixins/themeable/index.js\");\n/ harmony import / var _util_mixins__WEBPACK_IMPORTED_MODULE_2__ = webpack_require(/! ../../util/mixins / \"./node_modules/vuetify/lib/util/mixins.js\");\n// Styles\n // Mixins\n\n // Utilities\n\n\n/ @vue/component /\n\n/ harmony default export */ webpack_exports[\"default\"] = (Object(_util_mixins__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_mixins_themeable__WEBPACK_IMPORTED_MODULE_1__[\"default\"]).extend({\n name: 'v-app',\n props: {\n dark: {\n type: Boolean,\n default: undefined\n },\n id: {\n type: String,\n default: 'app'\n },\n light: {\n type: Boolean,\n default: undefined\n }\n },\n computed: {\n isDark() {\n return this.$vuetify.theme.dark;\n }\n\n },\n\n beforeCreate() {\n if (!this.$vuetify || this.$vuetify === this.$root) {\n throw new Error('Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object');\n }\n },\n\n render(h) {\n const wrapper = h('div', {\n staticClass: 'v-application--wrap'\n }, this.$slots.default);\n return h('div', {\n staticClass: 'v-application',\n class: {\n 'v-application--is-rtl': this.$vuetify.rtl,\n 'v-application--is-ltr': !this.$vuetify.rtl,\n ...this.themeClasses\n },\n attrs: {\n 'data-app': true\n },\n domProps: {\n id: this.id\n }\n }, [wrap

webpack.config.js

module.exports = {
  resolve: {
    alias: {
      "@": require("path").resolve(__dirname, "src") // change this to your folder path
    }
  },
  publicPath: "/dms-gui/",
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      }
    }]
  },
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ]
};

vue.config.js

const path = require('path');
module.exports = {
  transpileDependencies: ['vue-router', 'vuetify', 'axios'],
  ...
}

babel.config.js

module.exports = {
  presets: [
    ['@vue/app', { useBuiltIns: 'entry' }]
  ]
}

main.js

import 'core-js/stable'
import Vue from "vue";
import Vuetify from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store/store";
import VueCookies from "vue-cookies";
import AsyncComputed from 'vue-async-computed'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'vuetify/dist/vuetify.css';
import { BNav, BNavItemDropdown, BDropdownItem, BNavItem } from 'bootstrap-vue'

import vuetify from '@/plugins/vuetify'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(VueCookies)
Vue.use(Vuetify)
Vue.use(AsyncComputed)

Vue.component('b-nav', BNav)
Vue.component('b-nav-item-dropdown', BNavItemDropdown)
Vue.component('b-dropdown-item', BDropdownItem)
Vue.component('b-nav-item', BNavItem)


Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,

  render: function(h) {
    return h(App);
  }
}).$mount("#app");
Vue.use(Vuetify, {
  iconfont: 'md'
})
dafyman
  • 13
  • 4
  • The question is, do you absolutely have to support IE? If not, then don't waste your time supporting it because about 0% of your website's potential audience will use IE browser – AlekseyHoffman Dec 18 '19 at 15:36
  • Hi Alex unfortunately, I have to. The most of our customers use it. – dafyman Dec 18 '19 at 15:43
  • Have you tested the build version on IE? At least it looks as if you are trying to run the development version with IE11 and that does not work afaik. – Thomas Dec 18 '19 at 15:44
  • Hello Thomas, in production version (building by npx vue-cli-service build --modern) it doesn't work either. – dafyman Dec 18 '19 at 15:50

0 Answers0