TypeError: Cannot access private method in submit() function of RPCFormBase

[Anferney Grotestam]

I have a form defined in JavaScript named ConversationForm which extends from RPCFormBase.

This form is initiated through code:

const form = new ConversationForm(node);

I have an event listener on the submit button. In here we prevent the normal submission, as we have to determine the state of the "conversation" before submitting it.
After that we submit the form manually inside the event listener by calling the form.submit() function from RPCFormBase.

When using form.submit(), i get the following TypeScript error:
TypeError: Cannot access private method
    at __typeError (chunk-N7HIUZGM.mjs:13:9)
    at __accessCheck (chunk-N7HIUZGM.mjs:56:62)
    at __privateMethod (chunk-N7HIUZGM.mjs:59:49)
    at Proxy.<anonymous> (rpc.ts:267:29)
    at Generator.next (<anonymous>)
    at fulfilled (chunk-N7HIUZGM.mjs:64:24)

It points to line 267 of mod::publisher/js/forms/rpc.ts.

Is this the right way to go about this? Or is there an other way to go about this?

[Arnold Hendriks]

That's a JavaScript error, TypeScript errors are compile time. On line 267 i see:

      const valsAwaitable = this.#getSubmitVals();

I wonder if this is a bug in esbuild with '#', as the code points to an internal translation

What's the compatibility= setting on the assetpack? Esbuild has to translate #s unless you target es2022: https://esbuild.github.io/content-types/#javascript 

[Anferney Grotestam]

I have it set to es2016. After changing it to es2022 i get this error:

TypeError: Receiver must be an instance of class anonymous
    at Proxy.submit (rpc.ts:267:34)
    at async HTMLButtonElement.<anonymous> (conversationform.es:270:11)

Op maandag 21 oktober 2024 om 12:03:35 UTC+2 schreef Arnold Hendriks:

[Arnold Hendriks]

> by calling the form.submit() function from RPCFormBase.

how *exactly* are you calling form.submit? 

If i google the error message, I'm only getting one hit https://github.com/ethers-io/ethers.js/issues/4521 which mentions Vue. Are you using that too ?

Why is there a Proxy between conversationdform.es and the form in the stack trace? In the ES2016 version I assumed the Proxy was just an artifact of esbuild polyfilling/translating something, but it's still in the stack trace. 

Makes me wonder if the Proxy is the source of the problem (incorrectly forwarding the call so private members are becoming inacessible, or something as simple as losing the 'this' binding). Does 'form' look okay if you console.log it before invoking form.submit?

[Anferney Grotestam]

I'm using Vue yes. Looks like the Proxy was indeed the source of the problem. I was able to work around it by defining the variable outside of the Vue scope.

Thank you.

Op maandag 21 oktober 2024 om 14:02:42 UTC+2 schreef Arnold Hendriks:

[Wouter Hendriks]

I’m curious, what did you need to change exactly for it to work?

[Anferney Grotestam]

I placed the variable outside of the VueApp variable.

let form = null;

const VueApp = {

data() {

return {

Then inside the mounted() function of Vue i initiate the form using forms from import * as forms from '@mod-publisher/js/forms';:

forms.registerHandler("modulename:formhandler", (formNode) => {

form = new ConversationForm(formNode);

Op dinsdag 22 oktober 2024 om 10:07:04 UTC+2 schreef Wouter Hendriks: