DataTable

UI Components for Vue
Post Reply
aitudor
Posts: 4
Joined: 23 Nov 2020, 11:59

23 Nov 2020, 12:28

I have create a new vue 3 project (using vue-cli) with primevue and typescript. I have tried to add a DataTable component (in HelloWorld.vue file), but got the following error [1].
Project can be checked out at https://github.com/aitudor/hello-primevue
I also tried to checkout the primevue quickstart project (the https://github.com/primefaces/primevue- ... quickstart) and use the DataTable component and that worked.
Any idea why I get the error? I can see that this is related vue-loader, but I do not know what the problem is and how should be fixed.
[1]

Code: Select all

 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
 ...

aitudor
Posts: 4
Joined: 23 Nov 2020, 11:59

24 Nov 2020, 18:22

Answering my own question... The issue here was related to the optional chaining operator (that ? from the error) added in typescript 3.7. Issue was fixed by adding babel and the default config file babel.config.js. I still don't know what is the cause of the issue...
So, next time when using primevue with vue 3 make sure to use babel as well.
I guess the post can be closed now. Thanks

kristijan
Posts: 1
Joined: 24 Dec 2020, 14:33

24 Dec 2020, 14:35

Hey, could you please share some more details on how to fix this issue? What do you mean exactly by 'make sure to use babel'? Im new to all this and I am using WebpackEncore and running into the exact same issue. TY.

Edit: I guess I am continuing the same way as the OP by answering my own question :D

I added this to my webpack.config.js file (I am using webpack encore).

.configureBabel(function(babelConfig) {
babelConfig.plugins.push('@babel/plugin-proposal-optional-chaining');
}, {
includeNodeModules: ['primevue']
})
.enableVueLoader()

You need to install @babel/plugin-proposal-optional-chaining, add it as a plugin, and include the primevue node modules to be parsed by babel.

Hope this helps to anyone that stumbles upon this thread.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests