DataTable

[aitudor]

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]

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]

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

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.

[tugce.kucukoglu]

Hi,
Thanks for your feedback.

Best Regards,

[razola]

Hi,
I have de same issue.

Code: Select all

>                 return this.groupRowsBy !== column.props?.field;
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

It looks the Vue CLI cannot understand the '?' because it needs some loader.
I tried to change webpack.config.js as kristijan indicated but I get still the error at compilation.
I created my project with

Code: Select all

vue create projectname

and I selected manually all except TypeScript. My problem is I don't know TypeScript and I don't want to change my other JavaScript files. I thought TypeScript was a superset of JavaScript but it was not...
So, do I need to use TypeScript mandatory if I want to use DataTable?
There is a fix for my preset without TypeScript?
Thank you.

[avenmore]

Is Babel installed? Try:

Code: Select all

vue add babel

which will add the plugin and the default config.

[razola]

Yes, Here are all my dependencies and @vue/cli-plugin-babel is installed.
I've just used
vue create projname
and then I selected almost everything for Vue 3.
However it doesn't work.

"devDependencies": {
"@types/chai": "^4.2.11",
"@types/mocha": "^5.2.4",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-e2e-cypress": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-mocha": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-0",
"chai": "^4.1.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3"

But now I solved the problem by downgrading to primevue@3.1.2 instead of the problematic primevue@3.2.0-rc.1
So I hope the developers of Primevue see this and correct primevue@3.2.0-rc.1 because this is a bad release candidate.
Please developers fix it. The release candidate doesn't work!!! Thank you.