Migrating to vue 3

1 Answer 341 Views
Chart wrappers (package) DateInput DatePicker General Discussions
Andrew
Top achievements
Rank 1
Iron
Andrew asked on 05 May 2021, 05:06 AM | edited on 05 May 2021, 05:10 AM

Hello Folks, 

After updating vue to lattest version, I have this error after each 'npm run build' command:

 

Maybe, you have some project example with vue 3 and these libs (@progress/kendo-base-components-vue-wrapper,  @progress/kendo-base-components-vue-wrapper etc).

Here is my packege.json:

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "3.0.11",
    "vue-template-compiler": "^2.6.12",
    "@progress/kendo-base-components-vue-wrapper": "^2021.1.330",
    "@progress/kendo-charts-vue-wrapper": "^2021.1.330",
    "@progress/kendo-inputs-vue-wrapper": "^2021.1.330",
    "@progress/kendo-licensing": "^1.1.4",
    "@progress/kendo-popups-vue-wrapper": "^2021.1.330",
    "@progress/kendo-theme-bootstrap": "^4.35.1",
    "@progress/kendo-ui": "^2021.1.119",
    "@progress/kendo-vue-dateinputs": "^2.1.5",
    "@progress/kendo-vue-dropdowns": "^2.1.5",
    "@progress/kendo-vue-inputs": "^2.1.5",
    "@progress/kendo-vue-intl": "^2.1.5",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "cldr-core": "36.0.0",
    "cldr-dates-full": "36.0.0",
    "cldr-numbers-full": "36.0.0",
    "core-js": "^3.6.5"
  },
  "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.11",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue": "3.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

 

 

Thanks.

Plamen
Telerik team
commented on 05 May 2021, 06:01 AM

Hi,

I have just inspected a similar scenario in simple Stackblitz example but could not observe the issue. Here is my test page - https://stackblitz.com/edit/5tghfn-cxdcf1?file=package.json. Would you please review it and let me know what else should be added or done to replicate the issue?

 

Andrew
Top achievements
Rank 1
Iron
commented on 05 May 2021, 08:53 AM

Hello, attached source code bellow
Petar
Telerik team
commented on 10 May 2021, 07:17 AM

Hi Andrew. 

Check my answer below the post in which you shared your project.

1 Answer, 1 is accepted

Sort by
0
Andrew
Top achievements
Rank 1
Iron
answered on 05 May 2021, 08:46 AM
Forgive my stupidity. Here is my project source code. Just try run 'npm run build' in root directory and this error will appear (((
Petar
Telerik team
commented on 10 May 2021, 07:16 AM

Hi Andrew.

Thank you for the provided project. I can see in it that the project uses the vue-template-compiler package, which seems to not support Vue 3. I would assume that this package could be the source of the reported error. 

Another thing it is important to share is that the syntax of components' usage in Vue 2 and Vue 3 is slightly different. You will have to make some changes in the way the different components are used. Changing only the version of the Vue package from 2 to 3 is not enough. For more details, you can check our Chart demos which use Vue 3. 

Tags
Chart wrappers (package) DateInput DatePicker General Discussions
Asked by
Andrew
Top achievements
Rank 1
Iron
Answers by
Andrew
Top achievements
Rank 1
Iron
Share this question
or