Tintef/react-google-places-autocomplete

Getting issue while adding address

rahul138 opened this issue · 3 comments

rahul138 commented

We are using this component and it is working fine but one of our use case we are getting error which breaks whole UI
and reason seems to be null "place_id" from null value in getOptionValue={({ value }) => value.place_id}

Few snippet from error are as shown below.
Let me know if there is a quick fix or any suggestion for me.

_index.es.js:38 Uncaught TypeError: Cannot read properties of null (reading 'place_id')
at Object.getOptionValue (index.es.js:38:106900)
at Ko (index.es.js:38:70387)
at eval (index.es.js:38:70661)
at Array.some ()
at er (index.es.js:38:70636)
at Jo (index.es.js:38:69653)
at eval (index.es.js:38:69933)
at Array.map ()
at Uo (index.es.js:38:69734)
at eval (index.es.js:38:92110)
getOptionValue @ index.es.js:38
Ko @ index.es.js:38
eval @ index.es.js:38
er @ index.es.js:38
Jo @ index.es.js:38
eval @ index.es.js:38
Uo @ index.es.js:38
eval @ index.es.js:38
value @ index.es.js:38
applyDerivedStateFromProps @ react-dom.development.js:12425
updateClassInstance @ react-dom.development.js:13035
updateClassComponent @ react-dom.development.js:17432
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23959
performUnitOfWork @ react-dom.development.js:22774
workLoopSync @ react-dom.development.js:22702
renderRootSync @ react-dom.development.js:22665
performSyncWorkOnRoot @ react-dom.development.js:22288
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21888
enqueueSetState @ react-dom.development.js:12467
Component.setState @ react.development.js:365
eval @ index.es.js:38
eval @ index.es.js:38
(anonymous) @ places_impl.js:62
(anonymous) @ places_impl.js:15
e @ places_impl.js:11
c @ common.js:160
(anonymous) @ AutocompletionService.GetPredictionsJson?1sabc&4sen-US&15e3&21m1&2e1&callback=xdc._r5mph3&key=AIzaSyDP4nU4OC_vImXqOSgLytA0-T9PWtzZBFo&token=118117:1
react-dom.development.js:20085 The above error occurred in the component:

at o (webpack://sandy-onboarding/./node_modules/react-google-places-autocomplete/build/index.es.js?:38:70930)
at o (webpack://sandy-onboarding/./node_modules/react-google-places-autocomplete/build/index.es.js?:38:97434)
at r (webpack://sandy-onboarding/./node_modules/react-google-places-autocomplete/build/index.es.js?:38:94768)
at eval (webpack://sandy-onboarding/./node_modules/react-google-places-autocomplete/build/index.es.js?:38:103710)
at div
at div
at Transition (webpack://sandy-onboarding/./node_modules/react-transition-group/esm/Transition.js?:131:30)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/TransitionWrapper.js?:14:3)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Collapse.js?:50:3)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/AccordionCollapse.js?:20:7)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/AccordionBody.js?:18:7)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/AccordionItem.js?:16:7)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Accordion.js?:37:70)
at Location (webpack://sandy-onboarding/./src/web/pages/MyAccount/SetupFarm/Location.tsx?:56:23)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Col.js?:64:8)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Row.js?:12:3)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/createWithBsPrefix.js?:24:5)
at form
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Form.js?:50:3)
at div
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/ModalDialog.js?:12:3)
at div
at Transition (webpack://sandy-onboarding/./node_modules/react-transition-group/esm/Transition.js?:131:30)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/TransitionWrapper.js?:14:3)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Fade.js?:30:3)
at DialogTransition
at eval (webpack://sandy-onboarding/./node_modules/@restart/ui/esm/Modal.js?:67:7)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Modal.js?:77:3)
at OnboardingSetupFarmPage (webpack://sandy-onboarding/./src/web/pages/MyAccount/SetupFarm/Index.tsx?:129:26)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Col.js?:64:8)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Row.js?:12:3)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Container.js?:15:3)
at BaseLayout (webpack://sandy-onboarding/./src/web/components/layouts/BaseLayout.tsx?:56:25)
at RoutedComponent (webpack://sandy-onboarding/./src/core/components/RoutedCmp.tsx?:42:27)
at Route (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:647:29)
at Switch (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:849:29)
at Route (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:647:29)
at ScrollToTop (webpack://sandy-onboarding/./src/core/components/ScrollToTop.tsx?:13:26)
at C (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:904:37)
at Router (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:266:30)
at BrowserRouter (webpack://sandy-onboarding/./node_modules/react-router-dom/esm/react-router-dom.js?:57:35)
at AppRouter
at CmpContainer (webpack://sandy-onboarding/./src/core/components/CmpContainer.tsx?:45:80)
at App
at PersistGate (webpack://sandy-onboarding/./node_modules/redux-persist/es/integration/react.js?:38:5)
at Provider (webpack://sandy-onboarding/./node_modules/react-redux/es/components/Provider.js?:15:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20113
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20731
commitLayoutEffects @ react-dom.development.js:23421
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23146
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22985
performSyncWorkOnRoot @ react-dom.development.js:22324
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21888
enqueueSetState @ react-dom.development.js:12467
Component.setState @ react.development.js:365
eval @ index.es.js:38
eval @ index.es.js:38
(anonymous) @ places_impl.js:62
(anonymous) @ places_impl.js:15
e @ places_impl.js:11
c @ common.js:160
(anonymous) @ AutocompletionService.GetPredictionsJson?1sabc&4sen-US&15e3&21m1&2e1&callback=xdc.r5mph3&key=AIzaSyDP4nU4OC_vImXqOSgLytA0-T9PWtzZBFo&token=118117:1
react-dom.development.js:11340 Uncaught TypeError: Cannot read properties of null (reading 'place_id')
at Object.getOptionValue (index.es.js:38:106900)
at Ko (index.es.js:38:70387)
at eval (index.es.js:38:70661)
at Array.some ()
at er (index.es.js:38:70636)
at Jo (index.es.js:38:69653)
at eval (index.es.js:38:69933)
at Array.map ()
at Uo (index.es.js:38:69734)
at eval (index.es.js:38:92110)

MicrosoftTeams-image (2)
MicrosoftTeams-image (1)
MicrosoftTeams-image

addegbenga commented

@rahul138 can share your use-case? that would help narrow where the issue is coming from.
Someone might be able to help.

go-diego commented

@rahul138 Try making sure that selectProps.value.value isn't undefined

<GooglePlacesAutocomplete
      autocompletionRequest={{
        componentRestrictions: {
          country: ["us"],
        },
      }}
      minLengthAutocomplete={3}
      apiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY}
      onLoadFailed={(error) =>
        console.error("Could not inject Google script", error)
      }
      selectProps={{
        components: {
          IndicatorSeparator: undefined,
          DropdownIndicator: undefined,
          Control,
          Option,
          Menu,
          ValueContainer,
        },
        placeholder: "",
        value: {
         // address shouldn't be undefined here. I can reproduce the error you describe if it is undefined
          value: address || {},
          label: addressLabel,
        },
        onChange: handleAddressChange,
        isClearable: true,
        pageSize: 3,
        TextFieldProps: {
          InputLabelProps: {
            shrink: addressLabel === "" ? undefined : true,
          },
        },
      }}
    />
Tintef commented

I found it weird that the value returned from google places API doesn't have a place_id, can you provide a repo to reproduce?