Overwrite TextInput.jsx: formik.getFieldProps is not a function

[aterjung]

Hi,

i have some trouble overwriting
src/reactapp/src/components/common/Form/TextInput.jsx
Component to realise some custom styling. When i add a copy of the Component:

app/code/AktWeb/HyvaCheckout/reactapp/src/components/common/Form/TextInput.jsx

And modifiy the imports:

import { _replace } from '@hyva/react-checkout/utils';
import { formikDataShape } from '@hyva/react-checkout/utils/propTypes';

The checkout is broken with these Errormessage in the JS-Console:

bundle.js:39996 Uncaught TypeError: formik.getFieldProps is not a function
at Field (bundle.js:39996:22)
at renderWithHooks (bundle.js:61000:22)
at mountIndeterminateComponent (bundle.js:64286:17)
at beginWork (bundle.js:65582:20)
at HTMLUnknownElement.callCallback (bundle.js:50592:18)
at Object.invokeGuardedCallbackDev (bundle.js:50636:20)
at invokeGuardedCallback (bundle.js:50693:35)
at beginWork$1 (bundle.js:70567:11)
at performUnitOfWork (bundle.js:69814:16)
at workLoopSync (bundle.js:69737:9)

Could you imagine what is the reason for the error? Im lost at the moment.

thanks in advance

[rajeev-k-tomy]

Is there any usage of getFieldProps inside this component TextInput or any other part of your react app? If yes, probably you are using this outside formik context and that throws the error.

[aterjung]

I don`t see any usage of getFieldProps inside the TextInput Component. Actually, i only copied the original file from reactcheckout source to my own folder as shown in the documentation here. I did not change anything more than modifing the imports.

[rajeev-k-tomy]

@aterjung Do you have its usage anywhere else in your project?

[aterjung]

@rajeev-k-tomy the TextInput or the Formik context? Not for myself, but i copied the ShippingAddressForm.jsx as well, there is the original TextInput used.

[rajeev-k-tomy]

@aterjung I was asking whether there is any occurance of getFieldProps inside the reactapp directory?

[aterjung]

@rajeev-k-tomy no, it is not. I greped for it and the only places found are inside the node_modules directory.
There is an other Error i did not recognised before:

Cannot read properties of undefined (reading 'touched')
TypeError: Cannot read properties of undefined (reading 'touched')
at ErrorMessageImpl.render (http://localhost:3000/static/js/bundle.js:40296:30)
at finishClassComponent (http://localhost:3000/static/js/bundle.js:63890:35)
at updateClassComponent (http://localhost:3000/static/js/bundle.js:63847:28)
at beginWork (http://localhost:3000/static/js/bundle.js:65473:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:50464:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:50508:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:50565:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:70439:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:69686:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:69609:9)

but this is more irritating than the first error to me.

[rajeev-k-tomy]

I am not quite getting it. But you can put a console command inside TextInput comment like console.log({formik}) to check whether it becomes empty in any of the cases. Ideally, it should not be empty.