How to use latest Kanban component with Vue 2?

[sergey-saliy]

Hello Syncfusion team,
I'm using Kanban with Vue 2

"@syncfusion/ej2-base": "^18.2.44",
"@syncfusion/ej2-vue-kanban": "^18.2.44",
"vue": "^2.6.11",

and would like to update Kanban component to latest ^20.1.47 version. I found that latest version of ej2 components uses latest vue-class-components API which accordingly uses Vue 3 API. New vue-class-components API uses @Options keyword (previously @Component). This changes chain causes following compilation warnings:

WARNING in ./node_modules/@syncfusion/ej2-vue-kanban/src/kanban/kanban.component.js 182:9-16
"export 'Options' was not found in 'vue-class-component'

WARNING in ./node_modules/@syncfusion/ej2-vue-kanban/src/kanban/stackedheaders.directive.js 26:16-24
"export 'Vue' (imported as 'Vue3') was not found in 'vue-class-component'

Warnings probably are OK, but Options from Vue 3 also causing following compilation error:

TypeError: Object(...) is not a function
    at kanban.component.js:182:17
    
KanbanComponent = __decorate([
        EJComponentDecorator({
            props: properties
        }, isExecute)
        ,Options({ // <--- THIS
            props: props,
            watch: watch,
            emits: emitProbs
        })
    ], KanbanComponent);

To fix this, as I see, I should update vue-class-component to latest unstable "^8.0.0-rc.1" version (as your team suggest here #70 ) and this also requires update Vue to latest 3 version

Please correct me if I’m wrong and don’t see other way to update Kanban to latest version and keep my project with Vue 2

[VinithaJeyakumar]

Hi Sergey,

We have created a Vue 2 sample with our latest V20.1.47 using Kanban Component and we didn't face any errors as you reported. Also, we don't need Vue-class component package to use Vue2 projects. please check the sample below,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue2-1130956177

Please follow the instructions provided in the below documentation to configure the functionalities,

https://ej2.syncfusion.com/vue/documentation/kanban/getting-started/

Regards,
Vinitha

[sergey-saliy]

Thank you for response, Vinitha!

Looks like I found the possible reason.
In your example compiled kanban.component.js exports component in this way:

KanbanComponent = __decorate([
        EJComponentDecorator({
            props: properties
        }, isExecute)
    // NO Options(...) here
    ], KanbanComponent);

In my project I see following code in compiled kanban.component.js:

KanbanComponent = __decorate([
        EJComponentDecorator({
            props: properties
        }, isExecute)
         // Options(...) here
        ,Options({
            props: props,
            watch: watch,
            emits: emitProbs
        })
    ], KanbanComponent);

Fun part in https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/kanban/src/kanban/kanban.component.ts is the Options import is unused, as I can see. So, code should work without it, right? As you demonstrate with your example.

What can be possible webpack.config / babel.config options difference in yours and my project that leads to this different compilation result?

[sergey-saliy]

Update:

I found that your example using /dist/es6/ej2-vue-kanban.es2015.js because of babel-loader stage-3 preset which accordingly using es-2015 target

My project loads /dist/es6/ej2-vue-kanban.es5.js because we're using es5 target for compilation

Two files with a little different logic

[sergey-saliy]

Well, one more update
I found that Options(...) part of code inside vue-kanban library is removing by postinstall hook that running on vue-base library. Fun point that vue-base is not presented on package.json and hard-locked on package.lock of demo project you sent to me.

@syncfusion/ej2-vue-base/postinstall.js

What postinstall script do? Let's see: it looking for Vue version on /node_modules directory and if version is not 3 — it removes all Options(...) parts from all (!) ../ej2-vue-**/src/**/*.{component,directive}.js" ej2 libraries by mask:

file
        .replace(`import { Options } from 'vue-class-component';`, "")
        .replace(
          `,Options({
            props: props,
            watch: watch,
            emits: emitProbs
        })`,
          ""
        )

If I update only kanban from 18.2.44 to 20.1.47 — postinstall hook of updated vue-base doen't trigger and Kanban dist code contains Vue 3 Options calls. It's very tricky and un-intuitive behaviour, isn't it?

[VinithaJeyakumar]

Hi Sergey,

We have tried to reproduce the reported issue from our end by upgrading from the V18.2.44 to the latest V20.1.47 but unfortunately, we couldn't replicate the ​issue. Can you please share us with the runnable issue reproducing sample to further validate on the issue.

Regards,
Vinitha

[syncsiva]

@sergey-saliy This issue has not had any activity for 1 week. Closing for housekeeping purposes. Please feel free to reopen it if you have more information that can help us investigate the issue further.

[quangln2810]

Got the same issue using pnpm. Tried npm and it's gone