Vuejs not working in IE11: SCRIPT1002: Syntax error

Get Help
#1

There seems to be a weird issue with vuejs not running in IE11 and lower. I’ve played with babel as much as possible trying to make it transpile (as i believe it’s a issue with the transpilation of the code by bable+webpack)

Here is my json file:

{
  "name": "retail-vue",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "private": true,
  "main": "index.ts",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --mode=development",
    "start": "npm run dev",
    "prod": "webpack --mode production",
    "build": "node build/build.js",
    "test": "jest",
    "lint": "npm run eslint & npm run tslint",
    "tslint": "tslint -c tslint.json 'src/**/*.ts' || true & tslint -c tslint.json 'test/**/*.ts' || true",
    "eslint": "eslint --ext .js,.vue src test/unit || true",
    "lint-fix": "npm run eslint-fix & npm run tslint-fix",
    "tslint-fix": "tslint -c tslint.json 'src/**/*.ts' --fix || true & tslint -c tslint.json 'test/**/*.ts' --fix || true",
    "eslint-fix": "eslint --ext .js,.vue src test/unit --fix || true"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.1.5",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "es6-promise": "^4.2.5",
    "lodash-es": "^4.17.10",
    "moment": "^2.22.1",
    "rxjs": "^6.3.3",
    "vee-validate": "^2.0.9",
    "vue": "^2.5.17",
    "vue-class-component": "^6.3.2",
    "vue-property-decorator": "^6.1.0",
    "vue-router": "^3.0.1",
    "vuejs-datepicker": "^1.3.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.5",
    "@babel/preset-typescript": "^7.1.0",
    "@types/jest": "^23.3.9",
    "@types/lodash-es": "^4.17.1",
    "@types/node": "^10.12.0",
    "@types/webpack-env": "^1.13.6",
    "@vue/eslint-config-standard": "^3.0.0-beta.9",
    "@vue/test-utils": "^1.0.0-beta.25",
    "autoprefixer": "^8.4.1",
    "axios-mock-adapter": "^1.15.0",
    "babel-loader": "^8.0.4",
    "babel-preset-latest": "^6.24.1",
    "chalk": "^2.4.1",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "dotenv": "^6.0.0",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-html": "^4.0.3",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jest": "^21.15.1",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.1.0",
    "eslint-plugin-vue": "^4.5.0",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.11",
    "fork-ts-checker-webpack-plugin": "^0.4.10",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "imports-loader": "^0.8.0",
    "jest": "^23.6.0",
    "jest-serializer-vue": "^2.0.2",
    "lodash-webpack-plugin": "^0.11.5",
    "mini-css-extract-plugin": "^0.4.0",
    "node-notifier": "^5.2.1",
    "node-sass": "^4.9.2",
    "optimize-css-assets-webpack-plugin": "^4.0.2",
    "ora": "^2.1.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.5",
    "postcss-url": "^7.3.2",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.3",
    "sass-resources-loader": "^1.3.3",
    "scss-loader": "0.0.1",
    "sinon": "^5.0.7",
    "ts-jest": "^22.4.6",
    "ts-loader": "^4.3.0",
    "tslint": "^5.10.0",
    "tslint-loader": "^3.6.0",
    "typescript": "^2.8.3",
    "typescript-eslint-parser": "^15.0.0",
    "url-loader": "^1.0.1",
    "vue-eslint-parser": "^2.0.3",
    "vue-jest": "^3.0.0",
    "vue-loader": "^14.2.2",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.2",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.2",
    "whatwg-fetch": "^2.0.4"
  },
  "engines": {
    "node": ">= 8.0.0",
    "npm": ">= 5.0.0"
  }
}

part of the webpack config:

    {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },

Here is the file where it seems to fail:

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index.vue'


Vue.use(Router)

declare var settings: {
  DEMO: boolean
  RETAIL: boolean
}

const router = new Router({
  routes: []
})
export default router

router.addRoutes([
  {
    component: Index,
    meta: {
      title: 'Home',
    },
    name: 'home',
    path: '/',
  }
])

This is the babel.rc:

{
  "presets": [
    [ "@babel/preset-env", {
      "targets": {
        "browsers": [ "last 1 version", "ie >= 11" ]
      }
    }]
  ]
}

And here is the error:

/***/ "./node_modules/ts-loader/index.js!./node_modules/tslint-loader/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Index.vue":
/*!******************************************************************************************************************************************************!*\
  !*** ./node_modules/ts-loader!./node_modules/tslint-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Index.vue ***!
  \******************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
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_property_decorator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-property-decorator */ \"./node_modules/vue-property-decorator/lib/vue-property-decorator.js\");\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n};\r\n\r\n\r\nlet Index = class Index extends vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.isDemo = 1;\r\n    }\r\n};\r\nIndex = __decorate([\r\n    Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__[\"Component\"])({})\r\n], Index);\r\n/* harmony default export */ __webpack_exports__[\"default\"] = (Index);\r\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdHMtbG9hZGVyL2luZGV4LmpzIS4vbm9kZV9tb2R1bGVzL3RzbGludC1sb2FkZXIvaW5kZXguanMhLi9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9saWIvc2VsZWN0b3IuanM/dHlwZT1zY3JpcHQmaW5kZXg9MCEuL3NyYy9jb21wb25lbnRzL0luZGV4LnZ1ZS5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9jb21wb25lbnRzL0luZGV4LnZ1ZT9lMjE3Il0sInNvdXJjZXNDb250ZW50IjpbIlxyXG5pbXBvcnQgVnVlIGZyb20gJ3Z1ZSdcclxuaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAndnVlLXByb3BlcnR5LWRlY29yYXRvcidcclxuXHJcbmRlY2xhcmUgdmFyIHNldHRpbmdzOiB7XHJcbiAgREVNTzogYm9vbGVhblxyXG59XHJcblxyXG5AQ29tcG9uZW50KHt9KVxyXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBJbmRleCBleHRlbmRzIFZ1ZSB7XHJcbiAgcHJpdmF0ZSBpc0RlbW8gPSBzZXR0aW5ncy5ERU1PXHJcbn1cclxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFDQTtBQUNBO0FBT0E7QUFEQTs7QUFFQTtBQUNBO0FBQUE7QUFGQTtBQURBO0FBQ0E7QUFBQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/ts-loader/index.js!./node_modules/tslint-loader/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Index.vue\n");

/***/ }),

It fails at the line with the eval.
Any help would be greatly appreciated. If need more information let me know.
Thank you!

1 Like
#2

@cyc Did you figure this issue out?? I am having the same problem right now.

#3

It seemed to work if you import babel polyfill in you index.js at the top of the file above any other imports:
import '@babel/polyfill'
as well as having this babel.config.js
module.exports = {
“presets”: [
[
“@babel/preset-env”,
{
“modules”: false,
“useBuiltIns”: “entry”,
“targets”: {
“browsers”: [
“> 0.5%”,
“last 5 versions”,
“not ie <= 10”
]
}
}
]
],
“plugins”: [
[
“@babel/plugin-proposal-decorators”,
{
“legacy”: true
}
],
“@babel/plugin-proposal-class-properties”,
“@babel/plugin-transform-runtime”,
“@babel/plugin-transform-classes”,
“@babel/plugin-syntax-dynamic-import”,
“@babel/plugin-proposal-json-strings”,
“@babel/plugin-proposal-function-sent”,
“@babel/plugin-proposal-export-namespace-from”,
“@babel/plugin-proposal-throw-expressions”,
“@babel/plugin-proposal-export-default-from”

      ],
      env: {
        test: {
          presets: [
            '@babel/preset-env',
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties',
            'transform-es2015-modules-commonjs',
            'babel-plugin-dynamic-import-node',
          ],
        },
      },
    };

I hope this helps!

I dont know why the code doesn’t get formatted right :-/

1 Like
#4

I just solved the same issue by adding transpileDependencies: ['vuetify'], to the vue.config.js file

1 Like