Build fails, yesterday was working fine Vue 2, Typescript, Vue router

Hello ! i would appreciate some help since I cant deploy my project anymore
The proyect build is crushing with multiple errors and it seems to be related with the vue router injection and the main.ts but i may be wrong, locally the project works fine.
this are some of the logs I get from jenkins, it happens in all access to the $route and in two more places I attach bellow with a similar error

Module parse failed: Unexpected token (30:32)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/thread-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/ts-loader/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     $route: {
|       handler: function (to) {
>         this.progressTitle = to?.meta?.title;
|       },
|       immediate: true

 @ ./src/views/pass/finish/index.vue?vue&type=script&lang=ts& 1:0-404 1:420-423 1:425-826 1:425-826
 @ ./src/views/pass/finish/index.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

 error  in ./src/views/pass/videoIdent/documentation/index.vue?vue&type=script&lang=ts&
error  in ./src/router/router.middleware.ts

Module parse failed: Unexpected token (163:28)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/thread-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/ts-loader/index.js
 * ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|         store.dispatch('app/updateUser', {
>           user: requestData?.datosPersonales?.documento
|         });
| 

 @ ./src/router/index.ts 16:0-45 23:15-21
 @ ./src/main.ts
 @ multi ./src/main.ts

I also add some important files if they provide further help

main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'
import Vuelidate from 'vuelidate'
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { CDialog, CDialogBasic, CDialogConfirm, CToast } from 'fwkSFC-vue'
import './assets/styles/main.scss'

dom.watch()
library.add(fas as any, far as any)

Vue.config.productionTip = false
Vue.use(CToast)
Vue.use(Vuelidate)
Vue.component('c-dialog', CDialog)
Vue.component('c-dialog-basic', CDialogBasic)
Vue.component('c-dialog-confirm', CDialogConfirm)

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

vue.config.js

const CompressionPlugin = require('compression-webpack-plugin')
const MomentLocalesPlugin = require('moment-locales-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .type('javascript/auto')
      .use('i18n')
      .loader('@kazupon/vue-i18n-loader')
      .end()
    config.plugin('CompressionPlugin').use(CompressionPlugin)
  },
  configureWebpack: {
    devtool: 'eval-source-map',
    devServer: {
      compress: true,
      disableHostCheck: true,
      open: process.platform === 'darwin',
      host: '0.0.0.0',
      port: 443,
      https: true,
      hotOnly: false
    },
    plugins: [
      new MomentLocalesPlugin({
        localesToKeep: ['en', 'es']
      })
    ]
  }
}

package.json

{

  "name": "bc-ms-pass-digital",

  "version": "0.1.0-SNAPSHOT",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "test:unit": "vue-cli-service test:unit",

    "lint": "vue-cli-service lint",

    "serve-cua": "vue-cli-service serve --mode cualification",

    "serve-dev": "vue-cli-service serve --mode development",

    "serve-pro": "vue-cli-service serve --mode production"

  },

  "dependencies": {

    "@fortawesome/fontawesome-svg-core": "^1.2.36",

    "@fortawesome/free-regular-svg-icons": "^5.14.0",

    "@fortawesome/free-solid-svg-icons": "^5.14.0",

    "@types/resize-observer-browser": "^0.1.3",

    "@types/vuelidate": "^0.7.13",

    "axios": "^0.21.1",

    "core-js": "^3.6.5",

    "fwkSFC-vue": "http://artifactory.es.wcorp.carrefour.com/artifactory/snapshot/com/carrefour/componentizacion/componentizacion/0.0.83-SNAPSHOT/componentizacion-0.0.83-20220621.144412-1.tgz",

    "js-cookie": "^2.2.1",

    "mobile-detect": "^1.4.4",

    "moment": "^2.29.1",

    "pdfvuer": "^1.9.2",

    "vue": "^2.6.11",

    "vue-clickaway": "^2.2.2",

    "vue-i18n": "^8.21.1",

    "vue-recaptcha-v3": "^1.9.0",

    "vue-router": "^3.5.4",

    "vuelidate": "^0.7.5",

    "vuex": "^3.4.0"

  },

  "devDependencies": {

    "@kazupon/vue-i18n-loader": "^0.5.0",

    "@types/jest": "^24.0.19",

    "@typescript-eslint/eslint-plugin": "^2.33.0",

    "@typescript-eslint/parser": "^2.33.0",

    "@vue/cli-plugin-babel": "^4.5.0",

    "@vue/cli-plugin-eslint": "^4.5.0",

    "@vue/cli-plugin-router": "^4.5.18",

    "@vue/cli-plugin-typescript": "^4.5.0",

    "@vue/cli-plugin-unit-jest": "^4.5.0",

    "@vue/cli-plugin-vuex": "^4.5.0",

    "@vue/cli-service": "^4.5.0",

    "@vue/eslint-config-standard": "^5.1.2",

    "@vue/eslint-config-typescript": "^5.0.2",

    "@vue/test-utils": "^1.0.3",

    "compression-webpack-plugin": "^6.0.5",

    "eslint": "^6.7.2",

    "eslint-plugin-import": "^2.20.2",

    "eslint-plugin-node": "^11.1.0",

    "eslint-plugin-promise": "^4.2.1",

    "eslint-plugin-standard": "^4.0.0",

    "eslint-plugin-vue": "^6.2.2",

    "moment-locales-webpack-plugin": "^1.2.0",

    "resize-observer-polyfill": "^1.5.1",

    "sass": "^1.26.5",

    "sass-loader": "^8.0.2",

    "typescript": "^3.9.3",

    "vue-template-compiler": "^2.6.11"

  }

}

I figured it out ! it wasn’t a router problem, it was a typescript configuration issue, it wasnt recognising the optional chaining operator when transpiling, and it seems that having the compilerOption “target”: “esnext” was the issue, changing it to 2022 fixed the problem !

1 Like