TreeTable won't compile in TypeScript project

[avenmore]

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]

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]

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

[avenmore]

After updating from 3.1.2 to 3.2.1 ... new errors. Tried installing the Babel plugins but didn't help. Guess we'll be rolling back until this is sorted (along with the new ts issues with tooltip/badge/etc. directives).

Code: Select all

error  in ./node_modules/primevue/treetable/treetable.esm.js

Module parse failed: Unexpected token (329:24)
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
|               ], 8, ["aria-checked"]))
|             : createCommentVNode("", true),
>           (col.children?.body)
|             ? (openBlock(), createBlock(resolveDynamicComponent(col.children?.body), {
|                 key: 2,

[avenmore]

This problem has been resolved in 3.2.2. Thank you.