Skip to content

Vue is not working in IE11 (SCRIPT1002: Syntax error) #5239

@hermes7308

Description

@hermes7308

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;
}
// webpack.dev.js
const common = require('./webpack.common.js');

module.exports = Object.assign(common, {
    devServer: {
        noInfo: true,
        port: 9876,
    },
});
// 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. (ㅠㅠ)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions