Configuring with Laravel8 and Vue3

[diba66]

Hi,
I'm trying to use your components with Laravel8 + InertiaJs + Vue3 but when I compile a components that uses DataTable I receive this error:

Code: Select all

ERROR in ./node_modules/primevue/components/datatable/DataTable.vue?vue&type=script&lang=js (./node_modules/vue-loader/dist??ref--28-0!./node_modules/primevue/components/datatable/DataTable.vue?vue&type=script&lang=js) 312:35
Module parse failed: Unexpected token (312:35)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|       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-113 1:0-113 1:114-216 1:114-216
 @ ./node_modules/primevue/components/datatable/DataTable.vue
 @ ./node_modules/primevue/datatable.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--28-0!./resources/js/components/VueTable.vue?vue&type=script&lang=js
 @ ./resources/js/components/VueTable.vue?vue&type=script&lang=js
 @ ./resources/js/components/VueTable.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--28-0!./resources/js/Pages/Leads/Index.vue?vue&type=script&lang=js
 @ ./resources/js/Pages/Leads/Index.vue?vue&type=script&lang=js
 @ ./resources/js/Pages/Leads/Index.vue
 @ ./resources/js/Pages sync ^\.\/.*$
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js
 

Do you know what it could be?

Thank you
Davide

[Eireternal]

I am not using Laravel but I'm have the exact same issue! I have no idea what to do.

ERROR Build failed with errors.


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

Module parse failed: Unexpected token (316:61)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./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-240 1:0-240 1:241-470 1:241-470
@ ./node_modules/primevue/components/datatable/DataTable.vue
@ ./node_modules/primevue/datatable.js
@ ./src/main.ts
@ multi ./src/main.ts

[Eireternal]

FYI this most likely has to do with your webpack parser. I finally fixed my issue by using the vue cli plugin and this in my webpack.config:

{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-eslint"]
}

[mert.sincan]

Hi,

Thanks a lot for the report! Could you please create an issue for it on PrimeVue Github?

Best Regards,