[Solved] Migration to primevue 3 - Datatable loader

UI Components for Vue
Post Reply
dopi
Posts: 11
Joined: 27 Aug 2020, 11:17

05 Oct 2020, 15:25

Hi, I'm migrating previous vue2 app to vue3. When I try to import the DataTable component I get the following error:

Code: Select all

<template>
    <div>
        <DataTable></DataTable>
    </div>
</template>

<script>
import DataTable from 'primevue/datatable';

export default {
    components: {
        DataTable
    }

}
The error I get is the following:

Code: Select all

./node_modules/primevue/components/datatable/DataTable.vue?vue&type=script&lang=js (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./node_modules/primevue/components/datatable/DataTable.vue?vue&type=script&lang=js) 315:61
Module parse failed: Unexpected token (315: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;
|     }
I copied the package.json from the quickstart application https://github.com/primefaces/primevue-quickstart and is the following:

Code: Select all

{
  "name": "xxxx",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "3.0.0",
    "vue-router": "^4.0.0-beta.13",
    "primevue": "3.0.0-rc.2",
    "primeflex": "^2.0.0",
    "primeicons": "4.0.0",
    "mitt": "^2.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.5.0",
    "eslint-plugin-vue": "^7.0.0-0"
   }
}
How can I solve the error?
Last edited by dopi on 05 Oct 2020, 15:42, edited 1 time in total.

dopi
Posts: 11
Joined: 27 Aug 2020, 11:17

05 Oct 2020, 15:41

Ok it works. I missed the file "Babel.config.js" with

Code: Select all

module.exports = {
    presets: [
      '@vue/cli-plugin-babel/preset'
    ]
  }

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

10 Oct 2020, 15:51

Glad to hear.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 23 guests