title: Vue is not working in IE11 (SCRIPT1002: Syntax error)
body: <p>I am trying to set up Vue.
  It works in the Chrome browser but it doesn't work in IE11 browser.</p>
  
  <p>IE11 browser print </p>
  
  <blockquote>
    <p>SCRIPT1002: Syntax error
    bundle.js (5253, 1)</p>
  </blockquote>
  
  <pre><code>// 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 =&gt; 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?");
  </code></pre>
  
  <p>I arranged this message.</p>
  
  <pre><code>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 =&gt; h(_entry_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"]),
      store: _store__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\n});
  
  //# sourceURL=webpack:///./resources/vue/entry.js?
  ");
  </code></pre>
  
  <p>And this is my Vue setting</p>
  
  <pre><code>// 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"
    }
  </code></pre>
  
  <pre><code>// 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;
  }
  </code></pre>
  
  <pre><code>// webpack.dev.js
  const common = require('./webpack.common.js');
  
  module.exports = Object.assign(common, {
      devServer: {
          noInfo: true,
          port: 9876,
      },
  });
  </code></pre>
  
  <pre><code>// 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 =&gt; h(Page),
      store
  }).$mount("#app");
  </code></pre>
  
  <p>The problem is working in the Chrome browser, but it is not working in IE11 browser.
  Please help me. (ㅠㅠ)</p>