Uncaught TypeError: Cannot read property 'raw' of undefined

I am trying to adapt this elasticsearch example to the local ElasticSearch cluster, though it was documented as ‘This project is meant to be deployed to Netlify.’

This is what I modified:

• Change the Netlify call in runRequest.js file to this: const response = await fetch(“http://localhost:9200/_search”, {

• Adapt the value in buildRequest.js and buildRequestFilters.js for the elasticsearch field and fillter

I got this error when start typing in the search box:

`Autocomplete.js:74 Uncaught TypeError: Cannot read property ‘raw’ of undefined at Autocomplete.js:74 at Array.map (<anonymous>) at Autocomplete (Autocomplete.js:68) at renderWithHooks (react-dom.development.js:16317) at mountIndeterminateComponent (react-dom.development.js:18800) at beginWork$1 (react-dom.development.js:20149) at HTMLUnknownElement.callCallback (react-dom.development.js:337) at Object.invokeGuardedCallbackDev (react-dom.development.js:386) at invokeGuardedCallback (react-dom.development.js:439) at beginWork$$1 (react-dom.development.js:25768) at performUnitOfWork (react-dom.development.js:24682) at workLoopSync (react-dom.development.js:24658) at performSyncWorkOnRoot (react-dom.development.js:24247) at react-dom.development.js:12285 at unstable_runWithPriority (scheduler.development.js:701) at runWithPriority$2 (react-dom.development.js:12231) at flushSyncCallbackQueueImpl (react-dom.development.js:12280) at flushSyncCallbackQueue (react-dom.development.js:12268) at scheduleUpdateOnFiber (react-dom.development.js:23685) at Object.enqueueSetState (react-dom.development.js:14078) at WithSearch.push…/node_modules/react/cjs/react.development.js.Component.setState (react.development.js:315) at withSearch.js:92 at SearchDriver.js:350 at Array.forEach (<anonymous>) at SearchDriver._setState (SearchDriver.js:349) at SearchDriver.js:167 (anonymous) @ Autocomplete.js:74 Autocomplete @ Autocomplete.js:68 renderWithHooks @ react-dom.development.js:16317 mountIndeterminateComponent @ react-dom.development.js:18800 beginWork$1 @ react-dom.development.js:20149 callCallback @ react-dom.development.js:337 invokeGuardedCallbackDev @ react-dom.development.js:386 invokeGuardedCallback @ react-dom.development.js:439 beginWork$$1 @ react-dom.development.js:25768 performUnitOfWork @ react-dom.development.js:24682 workLoopSync @ react-dom.development.js:24658 performSyncWorkOnRoot @ react-dom.development.js:24247 (anonymous) @ react-dom.development.js:12285 unstable_runWithPriority @ scheduler.development.js:701 runWithPriority$2 @ react-dom.development.js:12231 flushSyncCallbackQueueImpl @ react-dom.development.js:12280 flushSyncCallbackQueue @ react-dom.development.js:12268 scheduleUpdateOnFiber @ react-dom.development.js:23685 enqueueSetState @ react-dom.development.js:14078 push…/node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:315 (anonymous) @ withSearch.js:92 (anonymous) @ SearchDriver.js:350 _setState @ SearchDriver.js:349 (anonymous) @ SearchDriver.js:167 Promise.then (async) (anonymous) @ SearchDriver.js:162 later @ index.js:22 setTimeout (async) (anonymous) @ index.js:28 runWithDebounce @ DebounceManager.js:58 setSearchTerm @ setSearchTerm.js:84 (anonymous) @ SearchBox.js:124 onChange @ SearchBox.js:220 onInputValueChange @ SearchBox.js:76 Downshift._this.internalSetState @ downshift.esm.js:506 Downshift._this.inputHandleChange @ downshift.esm.js:853 (anonymous) @ downshift.esm.js:114 (anonymous) @ downshift.esm.js:112 callCallback @ react-dom.development.js:337 invokeGuardedCallbackDev @ react-dom.development.js:386 invokeGuardedCallback @ react-dom.development.js:439 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454 executeDispatch @ react-dom.development.js:585 executeDispatchesInOrder @ react-dom.development.js:610 executeDispatchesAndRelease @ react-dom.development.js:713 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722 forEachAccumulated @ react-dom.development.js:692 runEventsInBatch @ react-dom.development.js:739 runExtractedPluginEventsInBatch @ react-dom.development.js:881 handleTopLevel @ react-dom.development.js:5831 batchedEventUpdates$1 @ react-dom.development.js:24378 batchedEventUpdates @ react-dom.development.js:1414 dispatchEventForPluginEventSystem @ react-dom.development.js:5927 attemptToDispatchEvent @ react-dom.development.js:6044 dispatchEvent @ react-dom.development.js:5947 unstable_runWithPriority @ scheduler.development.js:701 runWithPriority$2 @ react-dom.development.js:12231 discreteUpdates$1 @ react-dom.development.js:24395 discreteUpdates @ react-dom.development.js:1439 dispatchDiscreteEvent @ react-dom.development.js:5914 Show 28 more frames index.js:1375 The above error occurred in the <Autocomplete> component: in Autocomplete (created by SearchInput) in div (created by SearchInput) in SearchInput (created by Downshift) in div (created by Downshift) in form (created by Downshift) in Downshift (created by SearchBoxContainer) in SearchBoxContainer (created by WithSearch) in WithSearch (at App.js:67) in div (created by Layout) in div (created by Layout) in div (created by Layout) in Layout (at App.js:65) in ErrorBoundaryContainer (created by WithSearch) in WithSearch (at App.js:64) in div (at App.js:63) in Unknown (created by WithSearch) in WithSearch (created by WithSearch) in WithSearch (at App.js:61) in SearchProvider (at App.js:60) in App (at src/index.js:8)

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. console.<computed> @ index.js:1375 r @ backend.js:6 logCapturedError @ react-dom.development.js:21827 logError @ react-dom.development.js:21863 update.callback @ react-dom.development.js:23206 callCallback @ react-dom.development.js:13915 commitUpdateEffects @ react-dom.development.js:13955 commitUpdateQueue @ react-dom.development.js:13945 commitLifeCycles @ react-dom.development.js:22136 commitLayoutEffects @ react-dom.development.js:25331 callCallback @ react-dom.development.js:337 invokeGuardedCallbackDev @ react-dom.development.js:386 invokeGuardedCallback @ react-dom.development.js:439 commitRootImpl @ react-dom.development.js:25069 unstable_runWithPriority @ scheduler.development.js:701 runWithPriority$2 @ react-dom.development.js:12231 commitRoot @ react-dom.development.js:24909 finishSyncRender @ react-dom.development.js:24304 performSyncWorkOnRoot @ react-dom.development.js:24284 (anonymous) @ react-dom.development.js:12285 unstable_runWithPriority @ scheduler.development.js:701 runWithPriority$2 @ react-dom.development.js:12231 flushSyncCallbackQueueImpl @ react-dom.development.js:12280 flushSyncCallbackQueue @ react-dom.development.js:12268 scheduleUpdateOnFiber @ react-dom.development.js:23685 enqueueSetState @ react-dom.development.js:14078 push…/node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:315 (anonymous) @ withSearch.js:92 (anonymous) @ SearchDriver.js:350 _setState @ SearchDriver.js:349 (anonymous) @ SearchDriver.js:167 Promise.then (async) (anonymous) @ SearchDriver.js:162 later @ index.js:22 setTimeout (async) (anonymous) @ index.js:28 runWithDebounce @ DebounceManager.js:58 setSearchTerm @ setSearchTerm.js:84 (anonymous) @ SearchBox.js:124 onChange @ SearchBox.js:220 onInputValueChange @ SearchBox.js:76 Downshift._this.internalSetState @ downshift.esm.js:506 Downshift._this.inputHandleChange @ downshift.esm.js:853 (anonymous) @ downshift.esm.js:114 (anonymous) @ downshift.esm.js:112 callCallback @ react-dom.development.js:337 invokeGuardedCallbackDev @ react-dom.development.js:386 invokeGuardedCallback @ react-dom.development.js:439 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454 executeDispatch @ react-dom.development.js:585 executeDispatchesInOrder @ react-dom.development.js:610 executeDispatchesAndRelease @ react-dom.development.js:713 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722 forEachAccumulated @ react-dom.development.js:692 runEventsInBatch @ react-dom.development.js:739 runExtractedPluginEventsInBatch @ react-dom.development.js:881 handleTopLevel @ react-dom.development.js:5831 batchedEventUpdates$1 @ react-dom.development.js:24378 batchedEventUpdates @ react-dom.development.js:1414 dispatchEventForPluginEventSystem @ react-dom.development.js:5927 attemptToDispatchEvent @ react-dom.development.js:6044 dispatchEvent @ react-dom.development.js:5947 unstable_runWithPriority @ scheduler.development.js:701 runWithPriority$2 @ react-dom.development.js:12231 discreteUpdates$1 @ react-dom.development.js:24395 discreteUpdates @ react-dom.development.js:1439 dispatchDiscreteEvent @ react-dom.development.js:5914 Show 32 more frames Autocomplete.js:74 Uncaught (in promise) TypeError: Cannot read property ‘raw’ of undefined at Autocomplete.js:74 at Array.map (<anonymous>) at Autocomplete (Autocomplete.js:68) at renderWithHooks (react-dom.development.js:16317) at mountIndeterminateComponent (react-dom.development.js:18800) at beginWork$1 (react-dom.development.js:20149) at HTMLUnknownElement.callCallback (react-dom.development.js:337) at Object.invokeGuardedCallbackDev (react-dom.development.js:386) at invokeGuardedCallback (react-dom.development.js:439) at beginWork$$1 (react-dom.development.js:25768) at performUnitOfWork (react-dom.development.js:24682) at workLoopSync (react-dom.development.js:24658) at performSyncWorkOnRoot (react-dom.development.js:24247) at react-dom.development.js:12285 at unstable_runWithPriority (scheduler.development.js:701) at runWithPriority$2 (react-dom.development.js:12231) at flushSyncCallbackQueueImpl (react-dom.development.js:12280) at flushSyncCallbackQueue (react-dom.development.js:12268) at scheduleUpdateOnFiber (react-dom.development.js:23685) at Object.enqueueSetState (react-dom.development.js:14078) at WithSearch.push…/node_modules/react/cjs/react.development.js.Component.setState (react.development.js:315) at withSearch.js:92 at SearchDriver.js:350 at Array.forEach (<anonymous>) at SearchDriver._setState (SearchDriver.js:349) at SearchDriver.js:167 (anonymous) @ Autocomplete.js:74 Autocomplete @ Autocomplete.js:68 renderWithHooks @ react-dom.development.js:16317 mountIndeterminateComponent @ react-dom.development.js:18800 beginWork$1 @ react-dom.development.js:20149 callCallback @ react-dom.development.js:337 invokeGuardedCallbackDev @ react-dom.development.js:386 invokeGuardedCallback @ react-dom.development.js:439 beginWork$$1 @ react-dom.development.js:25768 performUnitOfWork @ react-dom.development.js:24682 workLoopSync @ react-dom.development.js:24658 performSyncWorkOnRoot @ react-dom.development.js:24247 (anonymous) @ react-dom.development.js:12285 unstable_runWithPriority @ scheduler.development.js:701 runWithPriority$2 @ react-dom.development.js:12231 flushSyncCallbackQueueImpl @ react-dom.development.js:12280 flushSyncCallbackQueue @ react-dom.development.js:12268 scheduleUpdateOnFiber @ react-dom.development.js:23685 enqueueSetState @ react-dom.development.js:14078 push…/node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:315 (anonymous) @ withSearch.js:92 (anonymous) @ SearchDriver.js:350 _setState @ SearchDriver.js:349 (anonymous) @ SearchDriver.js:167 Promise.then (async) (anonymous) @ SearchDriver.js:162 later @ index.js:22 setTimeout (async) (anonymous) @ index.js:28 runWithDebounce @ DebounceManager.js:58 setSearchTerm @ setSearchTerm.js:84 (anonymous) @ SearchBox.js:124 onChange @ SearchBox.js:220 onInputValueChange @ SearchBox.js:76 Downshift._this.internalSetState @ downshift.esm.js:506 Downshift._this.inputHandleChange @ downshift.esm.js:853 (anonymous) @ downshift.esm.js:114 (anonymous) @ downshift.esm.js:112 callCallback @ react-dom.development.js:337 invokeGuardedCallbackDev @ react-dom.development.js:386 invokeGuardedCallback @ react-dom.development.js:439 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454 executeDispatch @ react-dom.development.js:585 executeDispatchesInOrder @ react-dom.development.js:610 executeDispatchesAndRelease @ react-dom.development.js:713 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722 forEachAccumulated @ react-dom.development.js:692 runEventsInBatch @ react-dom.development.js:739 runExtractedPluginEventsInBatch @ react-dom.development.js:881 handleTopLevel @ react-dom.development.js:5831 batchedEventUpdates$1 @ react-dom.development.js:24378 batchedEventUpdates @ react-dom.development.js:1414 dispatchEventForPluginEventSystem @ react-dom.development.js:5927 attemptToDispatchEvent @ react-dom.development.js:6044 dispatchEvent @ react-dom.development.js:5947 unstable_runWithPriority @ scheduler.development.js:701 runWithPriority$2 @ react-dom.development.js:12231 discreteUpdates$1 @ react-dom.development.js:24395 discreteUpdates @ react-dom.development.js:1439 dispatchDiscreteEvent @ react-dom.development.js:5914 Show 28 more frames`

And the console shows the following information returned from ElasticSearch:

### hits: 0: highlight: {content: Array(1)} _id: “cee86628eaebffb36d3378be7a94651” _index: “myfirstfsjob” _score: 4.3091893 _source: content: “// https://d3js.org Version 4.13.0. Copyright 2018” file: extension: “js” filename: “d3.min.js” last_accessed: “2019-10-14T01:48:11.057+0000” url: “file:///neo4jd3/docs/js/d3.min.js” proto: Object proto: Object _type: “_doc” proto: Object 1: highlight: {content: Array(1)} _id: “bfe821144fff20a9f9b8daaffa29e” _index: “myfirstfsjob” _score: 4.3069882

state.results

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: content: {raw: “// https://d3js.org Version 4.13.0. Copyright 2018…(r=this._[t]).length;o<e;++o)r[o].value.apply(n,i”, snippet: “tt:–t(2-t)+…unction Yn(t){return((t*=2)<=1?”} file: raw: extension: “js” filename: “d3.min.js” last_accessed: “2019-10-14T01:48:11.057+0000” url: “file:///neo4jd3/docs/js/d3.min.js” proto: Object proto: Object proto: Object

State Update

{autocompletedResults: Array(10)} autocompletedResults: Array(10) 0: content: {raw: “// https://d3js.org Version 4.13.0. Copyright 2018…(r=this._[t]).length;o<e;++o)r[o].value.apply(n,i”, snippet: “tt:–t(2-t)+…unction Yn(t){return((t*=2)<=1?”} file: raw: extension: “js” filename: “d3.min.js” last_accessed: “2019-10-14T01:48:11.057+0000” url: “file:///neo4jd3/docs/js/d3.min.js” proto: Object proto: Object proto: Object

What should I change further to make it work? Thanks a lot!

[JasonStoltz]

Yeah, I think we need to publish some sort of specification of how data should be modeled, or even just update the propTypes in this project to reflect that.

[wjsbgsnwss]

Here is the update: it is my bad that there is NO ‘id’ field in the returned API, and this is where it failed (‘id’ is the hardcoded field you need to provide in the response/result):

./node_modules/@elastic/react-search-ui-views/lib/Autocomplete.js: key: result.id.raw,