I'm using an external package (@moj/pagination-layout) inside Vue + TypeScript app, this package uses nullish operator inside of it but when I try to run build it fails and give me this error
ERROR Failed to compile with 1 error 1:10:16 PM
error in ./node_modules/bootstrap-vue/src/components/table/helpers/mixin-sorting.js
Module parse failed: Unexpected token (245:53)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| const sortable = field.sortable
> const sortKey = !localSorting ? field.sortKey ?? key : key
|
| // Assemble the aria-sort attribute value
@ ./node_modules/bootstrap-vue/src/components/table/table.js 19:0-77 42:7-19 76:4-16
@ ./node_modules/bootstrap-vue/src/index.js
@ ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/@moj/pagination-layout/src/components/PaginationLayout.vue?vue&type=script&lang=js&
package.json
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"watch": "vue-cli-service build --watch"
},
"dependencies": {
"@moj/pagination-layout": "^1.0.14",
"@t2/data-table": "0.1.3",
"@t2/wizard": "0.2.1",
"file-saver": "2.0.2",
"i": "0.3.6",
"izitoast": "1.4.0",
"register-service-worker": "1.6.2",
"vue": "2.6.10",
"vue-application-insights": "^1.0.7",
"vue-axios": "^2.1.5",
"vue-class-component": "7.1.0",
"vue-di-container": "0.1.0",
"vue-i18n": "8.12.0",
"vue-property-decorator": "8.1.1",
"vue-router": "3.1.0",
"vue-template-loader": "1.0.0",
"vuetify": "1.5.14",
"vuex": "3.1.1",
"vuex-class": "0.3.2",
"coa": "2.0.2"
},
"devDependencies": {
"@babel/polyfill": "7.4.4",
"@types/file-saver": "2.0.1",
"@types/node": "12.7.4",
"@typescript-eslint/eslint-plugin": "^5.15.0",
"@typescript-eslint/parser": "^5.15.0",
"@vue/cli-plugin-babel": "^5.0.3",
"@vue/cli-plugin-pwa": "3.10.0",
"@vue/cli-plugin-eslint": "^5.0.3",
"@vue/cli-plugin-typescript": "3.10.0",
"@vue/cli-service": "^4.5.16",
"@vue/eslint-config-airbnb": "^6.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"axios": "^0.19.0",
"eslint": "^8.11.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^2.5.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.5.0",
"eslint-plugin-vuejs-accessibility": "^1.1.1",
"babel-plugin-transform-imports": "1.5.1",
"stylus": "0.54.5",
"stylus-loader": "3.0.2",
"typescript": "3.5.1",
"vue-cli-plugin-axios": "0.0.4",
"vue-cli-plugin-vuetify": "0.5.0",
"vue-template-compiler": "2.6.10",
"vuetify-loader": "^1.3.0",
"compression-webpack-plugin": "^6.1.1"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"node"
],
"paths": {
"@/*": [
"ClientApp/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"ClientApp/**/*.ts",
"ClientApp/**/*.tsx",
"ClientApp/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
babel.config.json
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry',
},
],
],
plugins: [
[
'transform-imports',
{
vuetify: {
transform: 'vuetify/es5/components/${member}',
preventFullImport: false,
},
},
],
],
};
Any clue?
