Custom Auto-Complete PCF: TypeError: Cannot read properties of undefined (reading 'then')

[kleanthiCRM]

Hi Andrew, I installed the managed solution in a trial environment but when I add the Custom Auto-Complete PCF control to a text field, on the first key press on the field, I get an error in the console and the input text field disappears. I also created the required JS WebResource and configured it accordingly. I am adding the error details and the screen captures. Thank you for your great contribution to the community!

TypeError: Cannot read properties of undefined (reading 'then')
    at onChange (Autocomplete.tsx:188:45)
    at TextFieldBase.eval (TextField.base.js:133:11)
    at callCallback (react-dom.development.js:2245:355)
    at commitUpdateQueue (react-dom.development.js:2246:207)
    at commitLifeCycles (react-dom.development.js:3267:1)
    at commitLayoutEffects (react-dom.development.js:3866:169)
    at HTMLUnknownElement.callCallback (react-dom.development.js:70:102)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:90:45)
    at invokeGuardedCallback (react-dom.development.js:105:126)
    at commitRootImpl (react-dom.development.js:3821:57)
    at unstable_runWithPriority (scheduler.development.js:659:16)
    at runWithPriority$1 (react-dom.development.js:2076:1035)
    at commitRoot (react-dom.development.js:3784:1235)
    at finishSyncRender (react-dom.development.js:3671:25)
    at performSyncWorkOnRoot (react-dom.development.js:3668:113)
    at eval (react-dom.development.js:2082:181)
logCapturedError @ react-dom.development.js:3231
logError @ react-dom.development.js:3240
update.callback @ react-dom.development.js:3367
callCallback @ react-dom.development.js:2245
commitUpdateQueue @ react-dom.development.js:2246
commitLifeCycles @ react-dom.development.js:3267
commitLayoutEffects @ react-dom.development.js:3866
callCallback @ react-dom.development.js:70
invokeGuardedCallbackDev @ react-dom.development.js:90
invokeGuardedCallback @ react-dom.development.js:105
commitRootImpl @ react-dom.development.js:3821
unstable_runWithPriority @ scheduler.development.js:659
runWithPriority$1 @ react-dom.development.js:2076
commitRoot @ react-dom.development.js:3784
finishSyncRender @ react-dom.development.js:3671
performSyncWorkOnRoot @ react-dom.development.js:3668
eval @ react-dom.development.js:2082
unstable_runWithPriority @ scheduler.development.js:659
runWithPriority$1 @ react-dom.development.js:2076
flushSyncCallbackQueueImpl @ react-dom.development.js:2082
flushSyncCallbackQueue @ react-dom.development.js:2081
flushPendingDiscreteUpdates @ react-dom.development.js:3683
flushDiscreteUpdates @ react-dom.development.js:3678
finishEventHandler @ react-dom.development.js:201
batchedEventUpdates @ react-dom.development.js:205
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:800
attemptToDispatchEvent @ react-dom.development.js:940
dispatchEvent @ react-dom.development.js:918
unstable_runWithPriority @ scheduler.development.js:659
runWithPriority$1 @ react-dom.development.js:2076
discreteUpdates$1 @ react-dom.development.js:3686
discreteUpdates @ react-dom.development.js:206
dispatchDiscreteEvent @ react-dom.development.js:914
Show 3 more frames
react-dom.development.js:3239 The above error occurred in the <TextFieldBase> component:
    in TextFieldBase (created by StyledTextFieldBase)
    in StyledTextFieldBase (created by TextAutocomplete)
    in div (created by TextAutocomplete)
    in TextAutocomplete

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Screen capture of the error:

the text field control configuration:

How the field looks like before I start typing anything in it:

[AndrewButenko]

Hello, Can you please provide the code behind getAutocompleteItems field? Andrew

[AndrewButenko]

Thanks for the heads up. It seems that Microsoft changed the way how PCF controls work. The issue is related to the fact that the callback function is not available from the PCF code for some reason. I will work on the enhancement of the code. This issue broke the extensibility of a few controls. Andrew

[chrisgmbishop]

Seems like they're at it again! I'm getting the same behaviour but different Console responses. Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at e._reloadWithStaticContent (clientsdk?version=1:2:25410) at e._handleGlobalError (clientsdk?version=1:2:26716) at _globalErrorHandler._handleGlobalErrorFn (clientsdk?version=1:2:9568) at clientsdk?version=1:2:62692 at Array.forEach (<anonymous>) at e.handleError (clientsdk?version=1:2:62664) at Object.invokeGuardedCallbackDev (react-dom.development.js:677:45) at invokeGuardedCallback (react-dom.development.js:696:126) at beginWork$1 (react-dom.development.js:4036:1) at performUnitOfWork (react-dom.development.js:3825:150) at workLoopSync (react-dom.development.js:3818:30) at renderRootSync (react-dom.development.js:3815:195) at performSyncWorkOnRoot (react-dom.development.js:3745:121) at eval (react-dom.development.js:2069:188) at unstable_runWithPriority (scheduler.development.js:468:16)

and

Error: Objects are not valid as a React child (found: object with keys {readyState, getResponseHeader, getAllResponseHeaders, setRequestHeader, overrideMimeType, statusCode, abort, state, always, catch, pipe, then, promise, progress, done, fail, status, statusText}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom.development.js:2254:827) at reconcileChildFibers (react-dom.development.js:2393:713) at reconcileChildren (react-dom.development.js:2696:22) at updateHostComponent (react-dom.development.js:2833:69) at beginWork (react-dom.development.js:3105:1073) at HTMLUnknownElement.callCallback (react-dom.development.js:657:119) at Object.invokeGuardedCallbackDev (react-dom.development.js:677:45) at invokeGuardedCallback (react-dom.development.js:696:126) at beginWork$1 (react-dom.development.js:4036:1) at performUnitOfWork (react-dom.development.js:3825:150) at workLoopSync (react-dom.development.js:3818:30) at renderRootSync (react-dom.development.js:3815:195) at performSyncWorkOnRoot (react-dom.development.js:3745:121) at eval (react-dom.development.js:2069:188) at unstable_runWithPriority (scheduler.development.js:468:16) at runWithPriority$1 (react-dom.development.js:2063:1059)

and

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. at AddressAutocompleteControl (webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./AddressAutocomplete/Components/AddressAutocompleteControl.tsx?:99:24)

[chrisgmbishop]

Update: I changed the API to Google from Bing and everything worked again.