Getting this error Uncaught TypeError: v is not a function at vgs-collect.js:5:129897 in version 2.12.0

[vmisiko]

Current Behavior

I am installing it in my vue Ui library, but it does not submit the input fields

Context

This has hindered me from submitting the form, it can certainly perform validation of the inputs fields but on submission it does not go through.

Your Environment

• Version used: 2.12.0
• Browser Name and version: Google Chrome
• Operating System and version (desktop or mobile): Mac os (Big Sur)
• Link to your project:

[AnnaKudriasheva]

@vmisiko sorry for the delayed response. Can I please ask you to provide your Collect.js config so we can try to reproduce it on our end?

[venkateshvegi]

Facing same issue
Current Behavior
I am installing it in my vue 3 Ui library, but it does not submit the input fields

Context
This has hindered me from submitting the form, it can certainly perform validation of the inputs fields but on submission it does not go through.

Your Environment
Version used: 2.12.0
Collect.JS config -0.6.0
Browser Name and version: Google Chrome
Operating System and version (desktop or mobile): Windows 10

[dashkovgs]

@venkateshvegi Hi. On our side for version 2.12.0 no errors for Vue3 ui library. Can I ask you to show your collects config and we can try to reproduce it on our end?

[venkateshvegi]

@AnnaKudriasheva @dashkovgs What all do you need in my collect config?
Here are some of the details
@vgs/collect-js: ^0.6.1
quasar: ^2.0.0",

adding following to my .vue file
import { loadVGSCollect } from '@vgs/collect-js'

const collect = await loadVGSCollect({
  tenantId: 'tntsfeqzp4a',
  environment: 'sandbox',
  version: '2.18.0',
}).catch((e) => {})

I have to update tenantId to vaultId as I get console error stating vaultId is required

baFieldSettings: {
type: 'number',
name: 'accountNumber',
successColor: '#000',
errorColor: '#D8000C',
placeholder: 'Add Account Number',
validations: ['required', '/^[0-9]*$/'],
css: {
'height': '50px',
'width': '100%',
'font-size': '16px',
'margin': '0px',
'box-sizing': 'border-box',
'font-family': '"Open Sans", sans-serif',
'background-clip': 'padding-box',
'border': '1px solid #CCCCCC',
'border-radius': '3.333px',
'padding': '2.5px 6.66px',
'transition': 'border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out',
'::placeholder': {
'line-height': '1'
},
'::-webkit-inner-spin-button': {
'-webkit-appearance': 'none',
'margin': '0',
},
'&:focus': {
'color': '#5c6873',
'background-color': '#fff',
'border-color': '#8ad4ee',
'outline': '0',
},
}
}

vgsForm.field("#accountNumber", baFieldSettings)

And I see the following error as I render the vgsField

[dashkovgs]

@venkateshvegi our team after investigation found an issue related on Vue3 state (Proxy), WeakMap structure and private fields/methods in collect library.
The Proxy can not expose the private fields of instance.
But in this case we can use toRaw method to transform Proxy to Object.
Demo example: (https://stackblitz.com/edit/vue-lqvqw8?file=src%2FApp.vue,src%2Fvgs%2FVGS.vue)

[AnnaKudriasheva]

@vmisiko please let us know if the workaround above helps you while we're working on the fix. Thank you!

[owenconti]

@dashkovgs @AnnaKudriasheva I was having the same issue (h is not a function) in a Vue 3 app and the workaround via toRaw() fixed the issue for me. Thanks.