Sourcemaps inaccurate (Vue + webpack + sentry) - vue.js

I'm trying to generate correct sourcemaps for my project written in vue2 so I could later use them in sentry. However right now when I upload them to Sentry, everything seems to be working fine apart from Sentry complaining that it cannot match the location in the source map. Sourcemap Validator also thinks so:
http://sourcemaps.io/report/1578938920829_http%3A%2F%2F7ec94d64.ngrok.io%2FSideMenuAnalytics.40e8f1227591b28bea7d.js
It looks that sourcemap mappings are off by X characters. Have you seen something like that and could give me a hint how to solve it? Or can someone share webpack config which is producing correct sourcemaps?
PS. I've found this: https://github.com/webpack/webpack/issues/8302#issuecomment-521779175 but I'm not sure if it's actually related to my problem.
source file (.js):
(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{485:function(t,e,i){var n=i(604);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);(0,i(8).default)("8850203c",n,!0,{})},603:function(t,e,i){"use strict";var n=i(485);i.n(n).a},604:function(t,e,i){(e=i(7)(!1)).push([t.i,".sidebar-menu__item{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:22px;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.sidebar-menu__tab{width:100%;border-left:4px solid transparent;padding-left:16px;color:#6d7688;display:inline-block;font-weight:500;text-decoration:none;vertical-align:middle;word-break:break-word}.sidebar-menu__tab--active{border-left:4px solid #1593ff;color:#1a2a4a;font-weight:500}.sidebar-menu__activetab{color:#0079e1}#media(max-width: 768px){.sidebar-menu{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}}.sidebar-submenu{margin-top:20px;margin-bottom:20px;width:100%;padding-left:20px}.sidebar-submenu .sidebar-menu__item{margin-bottom:1em}",""]),t.exports=e},605:function(t,e,i){var n=i(776);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);(0,i(8).default)("737a94e4",n,!0,{})},639:function(t,e,i){"use strict";i(22),i(94),i(23);var n={name:"SideMenu",components:{BaseSelect:i(51).r},props:["items","exactlyMatchRoute"],data:function(){return{options:[],menuItem:this.$route.name}},watch:{menuItem:function(t){this.$router.push({name:t}),this.menuItem=t}},methods:{flatten:function(t){var e=this;return t.reduce((function(t,i){return t.push({value:i.name,text:i.i18n}),i.items&&(t=t.concat(e.flatten(i.items))),t}),[])}},created:function(){this.options=this.flatten(this.items)}},a=(i(603),i(1)),o=Object(a.a)(n,(function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",[i("ul",{staticClass:"sidebar-menu hidden-xs"},t._l(t.items,(function(e){return i("li",{key:e.name},[i("div",{staticClass:"sidebar-menu__item"},[i("router-link",{staticClass:"sidebar-menu__tab",attrs:{"active-class":"sidebar-menu__tab--active",to:{name:e.name},tag:"a",exact:t.exactlyMatchRoute}},[t._v(t._s(e.i18n))]),e.items?i("ul",{staticClass:"sidebar-submenu"},t._l(e.items,(function(e){return i("li",{key:e.name},[i("router-link",{staticClass:"sidebar-menu__tab",attrs:{"active-class":"sidebar-menu__tab--active",to:{name:e.name},tag:"a",exact:!0}},[t._v(t._s(e.i18n))])],1)})),0):t._e()],1)])})),0),i("BaseSelect",{attrs:{classes:"large visible-xs-block",options:t.options},model:{value:t.menuItem,callback:function(e){t.menuItem=e},expression:"menuItem"}})],1)}),[],!1,null,null,null);e.a=o.exports},775:function(t,e,i){"use strict";var n=i(605);i.n(n).a},776:function(t,e,i){(e=i(7)(!1)).push([t.i,".partner-settings__contact{margin-bottom:20px}.partner-settings__title{margin-bottom:20px}.settings__row{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;margin-bottom:20px}.settings__row button:first-child{margin-right:25px}.settings__column{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:50%;padding-right:20px}.partner-settings__label{font-weight:500}",""]),t.exports=e},858:function(t,e,i){"use strict";i.r(e);var n={components:{SideMenu:i(639).a},data:function(){return{items:[{name:"general-performance",i18n:this.$t("pPartner general performance")},{name:"campaigns-performance",i18n:this.$t("pPartner campaigns performance")},{i18n:this.$t("jsPartner_analytics overview bookings"),name:"bookings-all",items:[{name:"bookings-all",i18n:this.$t("jsPartner_analytics overview all bookings")},{name:"bookings-conducted",i18n:this.$t("jsPartner_analytics overview conducted bookings")}]}]}}},a=(i(775),i(1)),o=Object(a.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)("SideMenu",{attrs:{items:this.items,exactlyMatchRoute:!1}})}),[],!1,null,null,null);e.default=o.exports}}]);
# sourceMappingURL=SideMenuAnalytics.40e8f1227591b28bea7d.js.map
sourcemap file (.js.map):
{"version":3,"sources":["webpack:///./src/components/SideMenu.vue?b476","webpack:///./src/components/SideMenu.vue?f4a6","webpack:///./src/components/SideMenu.vue?ddfe","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?6589","webpack:///./src/components/SideMenu.vue?6646","webpack:///./src/components/SideMenu.vue?82ff","webpack:///src/components/SideMenu.vue","webpack:///./src/components/SideMenu.vue","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?eb0c","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?0508","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?258b","webpack:///./src/pages/analytics/SideMenuAnalytics.vue?a09f","webpack:///src/pages/analytics/SideMenuAnalytics.vue","webpack:///./src/pages/analytics/SideMenuAnalytics.vue"],"names":["content","module","i","locals","exports","add","default","___CSS_LOADER_API_IMPORT___","push","component","_vm","this","_h","$createElement","_c","_self","staticClass","_l","tab","key","name","attrs","exactlyMatchRoute","_v","_s","i18n","t","_e","options","model","value","callback","$$v","menuItem","expression","items"],"mappings":"8EAGA,IAAIA,EAAU,EAAQ,KACA,iBAAZA,IAAsBA,EAAU,CAAC,CAACC,EAAOC,EAAIF,EAAS,MAC7DA,EAAQG,SAAQF,EAAOG,QAAUJ,EAAQG,SAG/BE,EADH,EAAQ,GAA+DC,SAChE,WAAYN,GAAS,EAAM,K,iCCR5C,oBAA2b,G,qBCE3bI,EADkC,EAAQ,EAChCG,EAA4B,IAE9BC,KAAK,CAACP,EAAOC,EAAI,wwBAAywB,KAElyBD,EAAOG,QAAUA,G,oBCHjB,IAAIJ,EAAU,EAAQ,KACA,iBAAZA,IAAsBA,EAAU,CAAC,CAACC,EAAOC,EAAIF,EAAS,MAC7DA,EAAQG,SAAQF,EAAOG,QAAUJ,EAAQG,SAG/BE,EADH,EAAQ,GAAkEC,SACnE,WAAYN,GAAS,EAAM,K,mDCR5C,ICAgM,ECkChM,CACE,KAAF,WACE,WAAF,CACI,W,MAAJ,GAEE,MAAF,8BACE,KAAF,WACI,MAAJ,CACM,QAAN,GACM,SAAN,mBAGE,MAAF,CACI,SAAJ,YACM,KAAN,cAAQ,KAAR,IACM,KAAN,aAGE,QAAF,CACI,QAAJ,YAAM,IAAN,OACM,OAAN,wBAKQ,OAJA,EAAR,MAAU,MAAV,OAAU,KAAV,SACA,UACU,EAAV,8BAEA,IACA,MAGE,QAAF,WACI,KAAJ,mC,gBCxDIS,EAAY,YACd,GHTW,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,KAAK,CAACE,YAAY,0BAA0BN,EAAIO,GAAIP,EAAS,OAAE,SAASQ,GAAK,OAAOJ,EAAG,KAAK,CAACK,IAAID,EAAIE,MAAM,CAACN,EAAG,MAAM,CAACE,YAAY,sBAAsB,CAACF,EAAG,cAAc,CAACE,YAAY,oBAAoBK,MAAM,CAAC,eAAe,4BAA4B,GAAK,CAAED,KAAMF,EAAIE,MAAM,IAAM,IAAI,MAAQV,EAAIY,oBAAoB,CAACZ,EAAIa,GAAGb,EAAIc,GAAGN,EAAIO,SAAUP,EAAS,MAAEJ,EAAG,KAAK,CAACE,YAAY,mBAAmBN,EAAIO,GAAIC,EAAS,OAAE,SAASQ,GAAG,OAAOZ,EAAG,KAAK,CAACK,IAAIO,EAAEN,MAAM,CAACN,EAAG,cAAc,CAACE,YAAY,oBAAoBK,MAAM,CAAC,eAAe,4BAA4B,GAAK,CAAED,KAAMM,EAAEN,MAAM,IAAM,IAAI,OAAQ,IAAO,CAACV,EAAIa,GAAGb,EAAIc,GAAGE,EAAED,UAAU,MAAK,GAAGf,EAAIiB,MAAM,QAAO,GAAGb,EAAG,aAAa,CAACO,MAAM,CAAC,QAAU,yBAAyB,QAAUX,EAAIkB,SAASC,MAAM,CAACC,MAAOpB,EAAY,SAAEqB,SAAS,SAAUC,GAAMtB,EAAIuB,SAASD,GAAKE,WAAW,eAAe,KAC75B,IGWpB,EACA,KACA,KACA,MAIa,IAAAzB,E,0CCnBf,oBAAsd,G,qBCEtdL,EADkC,EAAQ,EAChCG,EAA4B,IAE9BC,KAAK,CAACP,EAAOC,EAAI,0eAA2e,KAEpgBD,EAAOG,QAAUA,G,wCCNjB,ICA+M,ECO/M,CACE,WAAF,CAAI,S,OAAJ,GACE,KAFF,WAGI,MAAJ,CACM,MAAN,CACA,CAAQ,KAAR,sBAAQ,KAAR,yCACA,CAAQ,KAAR,wBAAQ,KAAR,2CACA,CACQ,KAAR,iDACQ,KAAR,eACQ,MAAR,CACA,CAAU,KAAV,eAAU,KAAV,sDACA,CAAU,KAAV,qBAAU,KAAV,kE,gBCXIK,EAAY,YACd,GHTW,WAAa,IAAiBG,EAATD,KAAgBE,eAAuC,OAAvDF,KAA0CI,MAAMD,IAAIF,GAAa,WAAW,CAACS,MAAM,CAAC,MAApFV,KAAgGwB,MAAM,mBAAoB,OACtI,IGWpB,EACA,KACA,KACA,MAIa,UAAA1B,E","file":"SideMenuAnalytics.40e8f1227591b28bea7d.js","sourcesContent":["// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=style&index=0&lang=scss&\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"8850203c\", content, true, {});","import mod from \"-!../../node_modules/vue-style-loader/index.js!../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../node_modules/vue-style-loader/index.js!../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=style&index=0&lang=scss&\"","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".sidebar-menu__item{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:22px;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.sidebar-menu__tab{width:100%;border-left:4px solid transparent;padding-left:16px;color:#6d7688;display:inline-block;font-weight:500;text-decoration:none;vertical-align:middle;word-break:break-word}.sidebar-menu__tab--active{border-left:4px solid #1593ff;color:#1a2a4a;font-weight:500}.sidebar-menu__activetab{color:#0079e1}#media(max-width: 768px){.sidebar-menu{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}}.sidebar-submenu{margin-top:20px;margin-bottom:20px;width:100%;padding-left:20px}.sidebar-submenu .sidebar-menu__item{margin-bottom:1em}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=style&index=0&lang=scss&\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"737a94e4\", content, true, {});","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('ul',{staticClass:\"sidebar-menu hidden-xs\"},_vm._l((_vm.items),function(tab){return _c('li',{key:tab.name},[_c('div',{staticClass:\"sidebar-menu__item\"},[_c('router-link',{staticClass:\"sidebar-menu__tab\",attrs:{\"active-class\":\"sidebar-menu__tab--active\",\"to\":{ name: tab.name},\"tag\":\"a\",\"exact\":_vm.exactlyMatchRoute}},[_vm._v(_vm._s(tab.i18n))]),(tab.items)?_c('ul',{staticClass:\"sidebar-submenu\"},_vm._l((tab.items),function(t){return _c('li',{key:t.name},[_c('router-link',{staticClass:\"sidebar-menu__tab\",attrs:{\"active-class\":\"sidebar-menu__tab--active\",\"to\":{ name: t.name},\"tag\":\"a\",\"exact\":true}},[_vm._v(_vm._s(t.i18n))])],1)}),0):_vm._e()],1)])}),0),_c('BaseSelect',{attrs:{\"classes\":\"large visible-xs-block\",\"options\":_vm.options},model:{value:(_vm.menuItem),callback:function ($$v) {_vm.menuItem=$$v},expression:\"menuItem\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../node_modules/babel-loader/lib/index.js??ref--1!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js??ref--1!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=script&lang=js&\"","<template>\n <div>\n <ul class=\"sidebar-menu hidden-xs\">\n <li :key=\"tab.name\" v-for=\"tab in items\">\n <div class=\"sidebar-menu__item\">\n <router-link\n active-class=\"sidebar-menu__tab--active\"\n class=\"sidebar-menu__tab\"\n :to=\"{ name: tab.name}\"\n tag=\"a\"\n :exact=\"exactlyMatchRoute\"\n >{{tab.i18n}}</router-link>\n <!-- second level navigation (this section displays children nested underneath the main element -->\n <ul class=\"sidebar-submenu\" v-if=\"tab.items\">\n <li :key=\"t.name\" v-for=\"t in tab.items\">\n <router-link\n active-class=\"sidebar-menu__tab--active\"\n class=\"sidebar-menu__tab\"\n :to=\"{ name: t.name}\"\n tag=\"a\"\n :exact=\"true\"\n >{{t.i18n}}</router-link>\n </li>\n </ul>\n </div>\n </li>\n </ul>\n <BaseSelect classes=\"large visible-xs-block\" :options=\"options\" v-model=\"menuItem\" />\n </div>\n</template>\n\n<script>\nimport { BaseSelect } from 'Components/base/index';\n\nexport default {\n name: 'SideMenu',\n components: {\n BaseSelect\n },\n props: ['items', 'exactlyMatchRoute'],\n data: function () {\n return {\n options: [],\n menuItem: this.$route.name\n }\n },\n watch: {\n menuItem: function (name) {\n this.$router.push({ name });\n this.menuItem = name;\n }\n },\n methods: {\n flatten: function (array) {\n return array.reduce((acc, value) => {\n acc.push({ value: value.name, text: value.i18n });\n if (value.items) {\n acc = acc.concat(this.flatten(value.items));\n }\n return acc;\n }, []);\n }\n },\n created: function () {\n this.options = this.flatten(this.items)\n }\n};\n</script>\n\n<style lang=\"scss\">\n#import \"~#getyourguide/design-system/colors/colors\";\n#import \"~#getyourguide/design-system/spacing/breakpoints\";\n\n$border-width: 4px;\n$indent: 16px;\n\n.sidebar-menu {\n &__item {\n display: flex;\n align-items: center;\n margin-bottom: 22px;\n flex-direction: column;\n }\n\n &__tab {\n width: 100%;\n border-left: $border-width solid transparent;\n padding-left: $indent;\n color: $ui-slate;\n display: inline-block;\n font-weight: 500;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n\n &--active {\n border-left: $border-width solid #1593ff;\n color: #1a2a4a;\n font-weight: 500;\n }\n }\n\n &__activetab {\n color: $cta-active;\n }\n\n #media (max-width: $screen-sm-min) {\n flex-direction: row;\n }\n}\n\n.sidebar-submenu {\n margin-top: $border-width + $indent;\n margin-bottom: $border-width + $indent;\n width: 100%;\n padding-left: $border-width + $indent;\n\n // Reset margin in submenu items\n .sidebar-menu__item {\n margin-bottom: 1em;\n }\n}\n</style>\n","import { render, staticRenderFns } from \"./SideMenu.vue?vue&type=template&id=39191e03&\"\nimport script from \"./SideMenu.vue?vue&type=script&lang=js&\"\nexport * from \"./SideMenu.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SideMenu.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/vue-style-loader/index.js!../../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../../node_modules/vue-style-loader/index.js!../../../node_modules/css-loader/dist/cjs.js??ref--2-oneOf-0-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--2-oneOf-0-2!../../../node_modules/sass-loader/dist/cjs.js??ref--2-oneOf-0-3!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=style&index=0&lang=scss&\"","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".partner-settings__contact{margin-bottom:20px}.partner-settings__title{margin-bottom:20px}.settings__row{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;margin-bottom:20px}.settings__row button:first-child{margin-right:25px}.settings__column{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:50%;padding-right:20px}.partner-settings__label{font-weight:500}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('SideMenu',{attrs:{\"items\":_vm.items,\"exactlyMatchRoute\":false}})}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../node_modules/babel-loader/lib/index.js??ref--1!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/babel-loader/lib/index.js??ref--1!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenuAnalytics.vue?vue&type=script&lang=js&\"","<template>\n <SideMenu :items=\"items\" :exactlyMatchRoute=\"false\"/>\n</template>\n\n<script>\nimport SideMenu from '../../components/SideMenu.vue';\n\nexport default {\n components: { SideMenu },\n data() {\n return {\n items: [\n { name: 'general-performance', i18n: this.$t('pPartner general performance') },\n { name: 'campaigns-performance', i18n: this.$t('pPartner campaigns performance') },\n {\n i18n: this.$t('jsPartner_analytics overview bookings'),\n name: 'bookings-all',\n items: [\n {name: 'bookings-all', i18n: this.$t('jsPartner_analytics overview all bookings')},\n {name: 'bookings-conducted', i18n: this.$t('jsPartner_analytics overview conducted bookings')},\n ]\n }\n ]\n };\n }\n};\n</script>\n\n<style lang=\"scss\">\n// TODO: title, columns, rows definitions should not\n// live here. All those definitions should be moved into\n// its own components.\n\n.partner-settings__contact {\n margin-bottom: 20px;\n}\n\n.partner-settings__title {\n margin-bottom: 20px;\n}\n\n.settings__row {\n display: flex;\n flex-direction: row;\n margin-bottom: 20px;\n\n button {\n &:first-child {\n margin-right: 25px;\n }\n }\n}\n\n.settings__column {\n display: flex;\n flex-direction: column;\n width: 50%;\n padding-right: 20px;\n}\n\n.partner-settings__label {\n font-weight: 500;\n}\n</style>\n","import { render, staticRenderFns } from \"./SideMenuAnalytics.vue?vue&type=template&id=6982eed3&\"\nimport script from \"./SideMenuAnalytics.vue?vue&type=script&lang=js&\"\nexport * from \"./SideMenuAnalytics.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SideMenuAnalytics.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""}
webpack config
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
const MomentLocalesPlugin = require("moment-locales-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const TerserPlugin = require("terser-webpack-plugin");
const state = require("../state");
const { isProd } = state;
module.exports = {
mode: isProd ? "production" : "development",
devtool: isProd ? "source-map" : "cheap-module-eval-source-map",
output: {
path: path.resolve(__dirname, "../..", "./public/assets/compiled"),
publicPath: "/assets/compiled/",
filename: "[name].[hash].js"
},
resolve: {
alias: {
Public: path.resolve(__dirname, "../..", "./public"),
Components: path.resolve(__dirname, "../..", "./src/components/"),
Mixins: path.resolve(__dirname, "../..", "./src/mixins/"),
Store: path.resolve(__dirname, "../..", "./src/store/"),
Util: path.resolve(__dirname, "../..", "./src/util/"),
Pages: path.resolve(__dirname, "../..", "./src/pages/"),
Styles: path.resolve(__dirname, "../..", "./src/styles/")
}
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
// noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
preserveWhitespace: false
}
}
},
{
test: /\.js$/,
loader: "babel-loader",
// In order to enable es6 module for SSR render it's necessary to tell babel
// that it should process module files.
// Reference: https://github.com/nuxt/nuxt.js/issues/3485
// We should only use include || exclude
exclude: function(modulePath) {
return (
/node_modules/.test(modulePath) &&
!/node_modules\/#getyourguide\/design-system/.test(modulePath) &&
!/node_modules\/#getyourguide\/event-logger/.test(modulePath) &&
!/node_modules\/#sentry\/browser/.test(modulePath) &&
!/node_modules\/v-tooltip/.test(modulePath) &&
!/node_modules\/vue-18n/.test(modulePath)
);
},
options: {
presets: [
[
"#babel/preset-env",
{
debug: false,
useBuiltIns: "usage",
corejs: 3,
targets: {
ie: "11"
},
modules: 'auto' // Needed for tree shaking to work.
}
]
],
plugins: [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-shorthand-properties"
]
}
},
{
test: /\.scss?$/,
oneOf: [
{
use: [
"vue-style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: false
}
},
{
loader: "postcss-loader",
options: {
sourceMap: false,
plugins: [
require("autoprefixer")({
grid: true,
flexbox: true
})
]
}
},
{
loader: "sass-loader",
options: {
implementation: require("sass"),
sourceMap: false
}
}
]
}
]
}
]
},
performance: {
maxEntrypointSize: 300000,
hints: isProd ? "warning" : false
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "common.[hash].css"
}),
...(isProd ? [] : [new FriendlyErrorsPlugin()]),
// new BundleAnalyzerPlugin({
// generateStatsFile: true,
// openAnalyzer: true
// }),
// To strip all locales except “en”
new MomentLocalesPlugin()
],
optimization: {
minimizer: isProd
? [
new TerserPlugin({
sourceMap: true
})
]
: []
}
};

Related

Integrating Monaco Editor with VueJS

Following the example for integrating the Monaco Editor with Webpack shown here fails when using VueJS.
webpack.config.js:
// eslint-disable-next-line #typescript-eslint/no-var-requires
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// eslint-disable-next-line #typescript-eslint/no-var-requires
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.ttf$/,
use: ['file-loader']
}]
},
plugins: [
new MonacoWebpackPlugin()
]
};
App.vue:
<template>
<div id="container"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
mounted() {
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
},
};
</script>
<style>
#container{
height: 100vh;
overflow: hidden;
}
</style>
The editor appears and has syntax highlighting. However, typing causes Unexpected usage errors to be thrown.
What step am I missing? Thanks!
Use https://github.com/suren-atoyan/monaco-loader with VueJS.\
import loader from '#monaco-editor/loader';
export default {
mounted() {
const wrapper = document.getElementById('editor')
loader.init().then(monaco => {
monaco.editor.create(wrapper, {
value: 'const name = "Peter"',
});
});
},
}

Prevent Webpack encodeing base64 for image

I'am learning Vue and building a small app with Vue CLI. During this process, I've met a troubleshoot that made me very confuse, with vue.config.js
This is my vue.config.js's content:
const webpack = require('webpack')
const path = require('path')
const is_production = process.env.NODE_ENV === 'production'
module.exports = {
publicPath: is_production ? "http://localhost:5000" : "https://my.carpi.test:8080",
devServer: {
https: true,
host: 'my.carpi.test'
},
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 10000
options.name = '[name].[ext]'
return options
})
},
configureWebpack: {
mode: is_production ? 'production' : 'development',
entry: './src/main.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'umd',
globalObject: 'this'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
"style-loader",
'css-loader',
'sass-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts',
publicPath: 'assets'
},
},
],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
},
},
],
},
]
}
}
}
And below is a sample of my scss file:
.browser-icon, [class^="browser-icon"] {
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.browser-icon-xs, .browser-icon.xs {
height: 18px;
width: 18px;
background-image: url('../images/Unknown.png');
background-size: cover;
}
.browser-ie-icon {
background-image: url('../images/IE.png') !important;
}
.browser-chrome-icon {
background-image: url('../images/Chrome.png') !important;
}
What I expected is the background images in scss file should be exported to distribution assets folder with [name].[ext] as defined, but webpack always encode them to base64 format, and the following screenshot is an example:
Screenshot Image
I still need to describe more here is I've also googled many threads about this question, I've also followed those answers but still unlucky.
So please help me out of this headache, any help would be appreciated!
Thanks
You are using url-loader which transforms files into base64 URIs.
Ref: https://webpack.js.org/loaders/url-loader/
Removing this will encode the images using the appropriate url.

Failing vue-cli with vuetify project to run with IE 11 polyfilling issue?

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'
})

ESLint throw error Expected method shorthand (object shorthand)

I am following the steps in this tutorial :
https://www.youtube.com/watch?v=z6hQqgvGI4Y
using VSCode (version 1.22.2) as my editor
I am running the following version
==> vue --version
2.9.3
of Vue / vue-cli installed from npm using the steps outlined here :
npm install --global vue-cli
My VSCode workspace settings (User settings) are as follows :
{
"workbench.colorTheme": "Visual Studio Dark",
"window.zoomLevel": 1,
"workbench.statusBar.visible": true,
"workbench.startupEditor": "newUntitledFile",
// Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
// "editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
// Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": false,
"editor.insertSpaces": true,
"[javascript]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"[vue]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"eslint.options": {
"extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": false
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
]
}
I have the Vetur tooling for VSCode installed :
https://github.com/vuejs/vetur
I have the following files :
src/components/HomeCentral.vue
<template>
<div class="homecentral">
<input type="text" v-model="title"><br/>
<h1>{{title}}</h1>
<p v-if="showName">{{user.first_name}}</p>
<p v-else>Nobody</p>
<ul>
<li v-for="item in items" :key="item.id">{{item.title}}</li>
</ul>
<button v-on:click="greet('Hello World')">Say Greeting</button>
</div>
</template>
<script>
export default {
name: 'HomeCentral',
data() {
return {
title: 'Welcome',
user: {
first_name: 'John',
last_name: 'Doe',
},
showName: true,
items: [
{ title: 'Item One' },
{ title: 'Item Two' },
{ title: 'Item Three' },
],
};
},
methods: {
greet: function (greeting) {
alert(greeting);
},
},
};
</script>
<style scoped>
</style>
src/App.vue
<template>
<div id="app">
<home-central></home-central>
</div>
</template>
<script>
import HomeCentral from './components/HomeCentral';
export default {
name: 'App',
components: {
HomeCentral,
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HomeCentral from '../components/HomeCentral';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HomeCentral',
component: HomeCentral,
},
],
});
My .eslintrc looks as follows :
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
node: true,
"es6": false
},
extends: 'airbnb-base',
// required to lint *.vue files
plugins: [
'html',
'vue'
],
// check if imports actually resolve
settings: {
'import/resolver': {
webpack: {
config: 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here
rules: {
// don't require .vue extension when importing
'import/extensions': ['error', 'always', {
js: 'never',
vue: 'never'
}],
// disallow reassignment of function parameters
// disallow parameter object manipulation except for specific exclusions
'no-param-reassign': ['error', {
props: true,
ignorePropertyModificationsFor: [
'state', // for vuex state
'acc', // for reduce accumulators
'e' // for e.returnvalue
]
}],
// allow optionalDependencies
'import/no-extraneous-dependencies': ['error', {
optionalDependencies: ['test/unit/index.js']
}],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
My .editorconfig looks like this :
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
But when I run
==> npm run dev
I get the following output :
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
WARNING Compiled with 1 warnings 3:01:35 PM
⚠ http://eslint.org/docs/rules/func-names Unexpected unnamed method 'greet'
src/components/HomeCentral.vue:33:12
greet: function (greeting) {
^
⚠ http://eslint.org/docs/rules/no-alert Unexpected alert
src/components/HomeCentral.vue:34:7
alert(greeting);
^
✘ http://eslint.org/docs/rules/object-shorthand Expected method shorthand
src/components/HomeCentral.vue:33:5
greet: function (greeting) {
^
✘ 3 problems (1 error, 2 warnings)
Errors:
1 http://eslint.org/docs/rules/object-shorthand
Warnings:
1 http://eslint.org/docs/rules/no-alert
1 http://eslint.org/docs/rules/func-names
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
Why is ESlint complaining about "Expected method shorthand" as an error and pointing to the following ES6 linting rule :
http://eslint.org/docs/rules/object-shorthand
Does 2.9.3 version of Vue use ES6 ?
How to silence the VScode editor from linting this semantically correct Vue code :
Fixed by following PeterVojtek answer at the following :
https://github.com/vuejs-templates/webpack/issues/73
Basically changed the following section on build/webpack.base.conf.js
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
to
const createLintingRule = () => ({
})
Also removed 'html' from plugins sections of .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
node: true,
"es6": false
},
extends: [
'airbnb-base',
],
// required to lint *.vue files
plugins: [
'vue',
],
// check if imports actually resolve
settings: {
'import/resolver': {
webpack: {
config: 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here
rules: {
// don't require .vue extension when importing
'import/extensions': ['error', 'always', {
js: 'never',
vue: 'never'
}],
// disallow reassignment of function parameters
// disallow parameter object manipulation except for specific exclusions
'no-param-reassign': ['error', {
props: true,
ignorePropertyModificationsFor: [
'state', // for vuex state
'acc', // for reduce accumulators
'e' // for e.returnvalue
]
}],
// allow optionalDependencies
'import/no-extraneous-dependencies': ['error', {
optionalDependencies: ['test/unit/index.js']
}],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
TSlint error/warning in callback function in 'Angular 10', VS code version 1.53.2 -
Solution -
doc.html(htmlData.innerHTML, {
callback(data: any): void {
data.save('angular-demo.pdf');
},
x: 10,
y: 10
});
package.json -
{
"dependencies": {
"#angular/core": "~10.1.3",
...
},
"devDependencies": {
"#angular/cli": "~10.1.3",
"#types/node": "^12.11.1",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2",
...
}
}

Test vue.js components with vue-loader dependency injection

I'm trying to test my Vue.js component using webpack's loader vue-loader.
I was following their tutorial but things didn't work out as expected.
Here's my component:
<template>
<header v-once class="header">
<router-link to="/" class="brand">
<span class="brand-name">{{ brand }}</span>
<span class="brand-version">{{ version }}</span>
</router-link>
</header>
</template>
<script>
import { brand, version } from './Header.json';
export default {
name: 'Header',
data() {
return {
brand,
version
}
}
};
</script>
<style lang="sass" rel="stylesheet/scss" scoped>
$font-stack: 'Open Sans', sans-serif;
$primary-color: #2d5079;
$border-color: #345b88;
$brand-color: whitesmoke;
.header {
.brand {
.brand-name {
letter-spacing: -1px;
}
.brand-version {
font-size: 50%;
}
display: table-cell;
padding-left: 10px;
vertical-align: middle;
text-decoration: none;
color: $brand-color;
text-transform: lowercase;
font-weight: 100;
font-size: 120%;
}
display: table-row;
height: 50px;
font-family: $font-stack;
background-color: $primary-color;
border-color: $border-color;
border-bottom: 1px solid;
align-items: center;
padding: 0 10px;
user-select: none;
}
</style>
Here's my spec file:
import Vue from 'vue';
const headerInjector = require('!!vue?inject!./Header.vue');
const header = headerInjector({
'./Header.json': {
brand: "Test",
version: "1.2.3"
}
});
describe('Header', () => {
it('should be named Header', () => {
expect(header.name).toEqual('Header');
});
it('should render', () => {
const vm = new Vue({
template: '<div><header></header></div>',
components: {
header
}
}).$mount();
expect(vm.$el.querySelector('.brand-name').textContent).toBe('Test');
expect(vm.$el.querySelector('.brand-version').textContent).toBe('1.2.3');
});
});
I use karma to run my tests.
Here's karma config file:
const conf = require('./gulp.conf');
module.exports = function (config) {
const configuration = {
basePath: '../',
singleRun: false,
autoWatch: true,
logLevel: 'INFO',
junitReporter: {
outputDir: 'test-reports'
},
browsers: [
'PhantomJS'
],
frameworks: [
'jasmine'
],
files: [
'node_modules/es6-shim/es6-shim.js',
conf.path.src('app.spec.js')
],
preprocessors: {
[conf.path.src('app.spec.js')]: [
'webpack'
]
},
reporters: ['progress', 'coverage'],
coverageReporter: {
type: 'html',
dir: 'coverage/'
},
webpack: require('./webpack-test.conf'),
webpackMiddleware: {
noInfo: true
},
plugins: [
require('karma-jasmine'),
require('karma-junit-reporter'),
require('karma-coverage'),
require('karma-phantomjs-launcher'),
require('karma-phantomjs-shim'),
require('karma-webpack')
]
};
config.set(configuration);
};
and here's the used webpack config for the pre-processing:
module.exports = {
module: {
preLoaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint'
}
],
loaders: [
{
test: /.json$/,
loader: 'json'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /.vue$/,
loader: 'vue'
}
]
},
plugins: [],
debug: true,
devtool: 'source-map'
};
Here's app.spec.js which is the entry point for the tests which karma loads.
It's responsible for loading all spec files:
const context = require.context('./components', true, /\.spec\.js$/);
context.keys().forEach(context);
Now, when I run the tests with karma, I get the following error:
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
TypeError: Object is not a constructor (evaluating '__vue_exports__(injections)')
at src/app.spec.js:1271
I have no clue for why this is happening, or what this error means, it's a bit cryptic to me.
Could someone pinpoint my error and explain it?
Was experiencing the same thing, seems to be an issue with version 3+ of inject loader. Perhaps the vuejs testing with mocks docs needs to be updated.
force the version in your package.json
"inject-loader": "^2.0.1",