TreeTable won't compile in TypeScript project

UI Components for Vue
Post Reply
avenmore
Posts: 7
Joined: 09 Nov 2020, 07:03

02 Jan 2021, 21:43

If I try to include the TreeTable component in a TypeScript project, the compile fails, something to do with the "?" operator (Nullish Coalescing?).

Code: Select all

 ERROR  Failed to compile with 2 errors
 error  in ./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=template&id=455c8289

Module parse failed: Unexpected token (101:31)
File was processed with these loaders:
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
|             (_openBlock(true), _createBlock(_Fragment, null, _renderList($options.columns, (col, i) => {
|               return (_openBlock(), _createBlock("th", {
>                 key: col.props?.columnKey||col.props?.field||i,
|                 style: col.props?.headerStyle,
|                 class: $options.getColumnHeaderClass(col),

 @ ./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=template&id=455c8289 1:0-270 1:0-270
 @ ./node_modules/primevue/components/treetable/TreeTable.vue
 @ ./node_modules/primevue/treetable.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/spa/components/login/LoginOpenCompany.vue?vue&type=script&lang=ts
 @ ./src/spa/components/login/LoginOpenCompany.vue?vue&type=script&lang=ts
 @ ./src/spa/components/login/LoginOpenCompany.vue
 @ ./src/spa/router/AppRoutes.ts
 @ ./src/spa/router/router.ts
 @ ./src/spa/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.102:40000&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/spa/main.ts

 error  in ./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=script&lang=js

Module parse failed: Unexpected token (295:32)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
|         },
|         isMultiSorted(column) {
>             return column.props?.sortable && this.getMultiSortMetaIndex(column) > -1
|         },
|         isColumnSorted(column) {

 @ ./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=script&lang=js 1:0-190 1:0-190 1:191-370 1:191-370      
 @ ./node_modules/primevue/components/treetable/TreeTable.vue
 @ ./node_modules/primevue/treetable.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/spa/components/login/LoginOpenCompany.vue?vue&type=script&lang=ts
 @ ./src/spa/components/login/LoginOpenCompany.vue?vue&type=script&lang=ts
 @ ./src/spa/components/login/LoginOpenCompany.vue
 @ ./src/spa/router/AppRoutes.ts
 @ ./src/spa/router/router.ts
 @ ./src/spa/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.102:40000&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/spa/main.ts
I solved a similar problem when using Optional Chaining and Nullish Coalescing by setting my target to es2018 as suggested in this StackOverflow post. Changing it back did not fix this error nor did trying the Babel plugin config.

Is something getting confused by this symbol? Any suggestions?

TIA.

avenmore
Posts: 7
Joined: 09 Nov 2020, 07:03

03 Jan 2021, 09:22

This problem also occurs with the DataTable.

Code: Select all

 ERROR  Failed to compile with 1 error                                                                        09:11:50

 error  in ./node_modules/primevue/components/datatable/DataTable.vue?vue&type=script&lang=js

Module parse failed: Unexpected token (310:67)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
|         if (this.reorderableColumns) {
|             let columnOrder = [];
>             this.columns.forEach(col => columnOrder.push(col.props?.columnKey||col.props?.field));
|             this.d_columnOrder = columnOrder;
|         }

 @ ./node_modules/primevue/components/datatable/DataTable.vue?vue&type=script&lang=js 1:0-160 1:0-160 1:161-310 1:161-310
 @ ./node_modules/primevue/components/datatable/DataTable.vue
 @ ./node_modules/primevue/datatable.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=ts
 @ ./src/App.vue?vue&type=script&lang=ts
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.102:26541&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
I have recreated the problem with the simplest of apps at CodeSandbox.io.

Vue: 3.0.5
PrimeVue: 3.1.1

Code: Select all

SyntaxError
expected expression, got '<'
z
https://codesandbox.io/static/js/sandbox.5a7ff733c.js:1:98378
evaluate
https://codesandbox.io/static/js/sandbox.5a7ff733c.js:1:110544
evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.5a7ff733c.js:1:120123
c
https://codesandbox.io/static/js/sandbox.5a7ff733c.js:1:110289
evaluate
https://z6prb.csb.app/node_modules/primevue/components/datatable/DataTable.vue:5:33
z
https://codesandbox.io/static/js/sandbox.5a7ff733c.js:1:98419
evaluate
https://codesandbox.io/static/js/sandbox.5a7ff733c.js:1:110544
...
This is a show-stopping problem, so urgent help would be really be appreciated.

avenmore
Posts: 7
Joined: 09 Nov 2020, 07:03

03 Jan 2021, 13:19

While trying to get the possible Babel plugins installed, I realized that the Vue Babel plugin was not installed. The solution was to run

Code: Select all

vue add babel
or

Code: Select all

npm install @vue/cli-plugin-babel --save-dev
No need to configure any other Babel plugins or TranspileDependencies, DataTables and TreeTables are now compiling and working :D

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests