Vue-cli: Vue is not working in IE11 (SCRIPT1002: Syntax error)

Created on 3 Mar 2020 · 1Comment · Source: vuejs/vue-cli

I am trying to set up Vue.
It works in the Chrome browser but it doesn't work in IE11 browser.

IE11 browser print

SCRIPT1002: Syntax error
bundle.js (5253, 1)

// bundle.js (5253, 1)
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var vue_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-router */ \"./node_modules/vue-router/dist/vue-router.esm.js\");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _entry_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./entry.vue */ \"./resources/vue/entry.vue\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../store */ \"./resources/store/index.js\");\n/* harmony import */ var _axios__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../axios */ \"./resources/axios/index.js\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../common */ \"./resources/common/index.js\");\n\n\n\n\n\n\n // input key event code\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].config.keyCodes = {\n  \"ctrl\": 17,\n  \"arrow-keys\": [37, 38, 39, 40]\n}; // Moment\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].config.$moment = moment__WEBPACK_IMPORTED_MODULE_2___default.a; // Axios\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].prototype.$axios = _axios__WEBPACK_IMPORTED_MODULE_5__[\"default\"]; // CommonUtils\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].prototype.$common = _common__WEBPACK_IMPORTED_MODULE_6__[\"default\"]; // VueRouter\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_router__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nnew vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  render: h => h(_entry_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"]),\n  store: _store__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n}).$mount(\"#app\");\n\n//# sourceURL=webpack:///./resources/vue/entry.js?");

I arranged this message.

eval("
__webpack_require__.r(__webpack_exports__);

/* harmony import */ 
var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");

/* harmony import */ 
var vue_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-router */ \"./node_modules/vue-router/dist/vue-router.esm.js\");

/* harmony import */ 
var _entry_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./entry.vue */ \"./resources/vue/entry.vue\");

/* harmony import */ 
var _store__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../store */ \"./resources/store/index.js\");

/* harmony import */ 
var _axios__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../axios */ \"./resources/axios/index.js\");

/* harmony import */ 
var _common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../common */ \"./resources/common/index.js\");

// input key event code
vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].config.keyCodes = {
  \"ctrl\": 17,
  \"arrow-keys\": [37, 38, 39, 40]
}; 

// Axios
vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].prototype.$axios = _axios__WEBPACK_IMPORTED_MODULE_4__[\"default\"]; 

// CommonUtils
vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].prototype.$common = _common__WEBPACK_IMPORTED_MODULE_5__[\"default\"]; 

// VueRouter
vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_router__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);

_store__WEBPACK_IMPORTED_MODULE_3__[\"default\"].$app = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({

  el: '#page',
  render: h => h(_entry_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"]),
    store: _store__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\n});

//# sourceURL=webpack:///./resources/vue/entry.js?
");

And this is my Vue setting

// package.json
/...
"devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "babel-loader": "^8.0.2",
    "cross-env": "5.2.0",
    "css-loader": "^2.1.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.3",
    "file-loader": "1.1.11",
    "vue-loader": "14.2.4",
    "vue-template-compiler": "2.6.11",
    "vue-template-loader": "^1.0.0",
    "webpack": "4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.8.2"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "moment": "^2.24.0",
    "promise.prototype.finally": "^3.1.2",
    "vue": "^2.6.10",
    "vue-infinite-loading": "^2.4.4",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1"
  }

// webpack.common.js
let path = require('path');
let glob = require('glob');

module.exports = {
    entry: getEntries(),
    output: {
        path: path.resolve(__dirname, "../web"),
        filename: '[name]/bundle.js'
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        },
        extensions: ["*", ".js", ".vue", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.css/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    }
};

function getEntries() {
    let entryPathList = glob.sync('./resources/vue/**/entry.js');
    let entry = {};

    for (let index in entryPathList) {
        let configPath = entryPathList[index];
        let parentPath = configPath.substring(0, configPath.lastIndexOf("/"));

        entry[parentPath] = configPath;
    }

    return entry;
}



md5-3a6d1699c5af686a9d1e04bdcac9704a



// webpack.dev.js
const common = require('./webpack.common.js');

module.exports = Object.assign(common, {
    devServer: {
        noInfo: true,
        port: 9876,
    },
});



md5-3a6d1699c5af686a9d1e04bdcac9704a



// entry.js
import Vue from 'vue';
import VueRouter from "vue-router";
import moment from "moment";
import Page from "./entry.vue";
import store from "../store";
import axios from "../axios";
import common from "../common";

// input key event code
Vue.config.keyCodes = {
    "ctrl": 17,
    "arrow-keys": [37, 38, 39, 40]
};
// Axios
Vue.prototype.$axios = axios;
// CommonUtils
Vue.prototype.$common = common;

// VueRouter
Vue.use(VueRouter);

new Vue({
    render: h => h(Page),
    store
}).$mount("#app");

Please help me. (ㅠㅠ)

Source

hermes7308

👍1

>All comments

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!