0

Whenever I send a message on my React Native App, I receive this error:

Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'result.queryResult.fulfillmentMessages')
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

I should be receiving at least the default response set in Dialogflow, but it seems like the app is not actually connected to Dialogflow. I created a service account and key and copied the key elements in an env.js file. This error shows up once I send a message in the chatbot UI.

Edit: I noticed that my result.queryResult is undefined. I'm not sure how to fix this. I followed this tutorial: https://blog.jscrambler.com/build-a-chatbot-with-dialogflow-and-react-native/

Chat.js

import React, { Component } from 'react'; 
import { StyleSheet, Text, View, Image } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import {
    firebase,
    firebaseConfig,
    db,
    getUserDocument,
    realtime, 
  } from "../../firebase/config";
  import "firebase/auth";
  import "firebase/firestore";
  import "firebase/database";
  import { dialogflowConfig } from '../../../env'; //configuration object 
  import { Dialogflow_V2 } from 'react-native-dialogflow';

  const user = firebase.auth().currentUser;
  const MT_BOT =  {
        _id: 2,
        name: 'React Native',
        avatar:'https://www.nicepng.com/png/detail/359-3591844_svg-free-stock-african-american-women-clipart-african.png',
  }

export default class Chat extends React.Component {

    state = {
        messages: [ 
            {
                _id: 1,
                text: 'Hi, how can I help you?', //in the component's state, there is one message when the component is rendered intially
                createdAt: new Date(), //display current time and date in the chat UI
                user: MT_BOT
            }
        ]
    }

    componentDidMount() { //lifecycle method to set the configuration of Dialogflow
        Dialogflow_V2.setConfiguration (
            dialogflowConfig.client_email,
            dialogflowConfig.private_key,
            Dialogflow_V2.LANG_ENGLISH_US,
            dialogflowConfig.project_id
        );
    }

    handleGoogleResponse(result) {
        let text = result.queryResult.fulfillmentMessages[0].text.text[0]; //extract a word from result
        this.sendBotResponse(text);
    }

    onSend(messages = []) { //once user clicks "send", their message gets stored in state variable
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, messages),
        }))

        let message = messages[0].text;
        Dialogflow_V2.requestQuery( //sends request to Dialogflow, w 3 parameters
            message,
            (result) => this.handleGoogleResponse(result), //if response is successful handleGoogle gets triggered
            (error) => console.log(error) //error function if not result function
        );
    }
    onQuickReply(quickReply) { 
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, quickReply),
        }))

        let message = quickReply[0].value;
        Dialogflow_V2.requestQuery( //sends request to Dialogflow, w 3 parameters
            message,
            (result) => this.handleGoogleResponse(result), //if response is successful handleGoogle gets triggered
            (error) => console.log(error) //error function if not result function
        );
    }

   
    
    sendBotResponse(text) {
        let msg = { //create the message object
          _id: this.state.messages.length + 1,
          text, //pass the message we receive to the user
          createdAt: new Date(), //when the message is generated
          user: MT_BOT //bot sends the response to the user
        };
    
        this.setState(previousState => ({   //updates state of the App component & displays text on app
          messages: GiftedChat.append(previousState.messages, [msg])
        }));
    }
    

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: '#caf7e3' }}>
                <GiftedChat
                    messages={this.state.messages}
                    onSend={messages => this.onSend(messages)}
                    onQuickReply={(quickReply) => this.onQuickReply(quickReply)}
                    user={{
                        _id: 1
                    }}
                />
            </View>
        )
    }
}
  • Did you use some tutorials or guidelines? Could you provide all the steps you have followed? Did you try to use examples i.e. from [this guide](https://www.smashingmagazine.com/2021/01/dialogflow-agent-react-application/)? – PjoterS Jun 28 '21 at 10:05
  • @PjoterS I used these guides https://medium.com/zenofai/creating-a-chatbot-for-healthcare-in-react-native-using-dialogflow-764c29cfed29 and https://blog.jscrambler.com/build-a-chatbot-with-dialogflow-and-react-native/ – Anne Willow Jun 28 '21 at 20:35
  • Did you mix code from those 2 tutorials? I can see that in some of your code parts you are missing `;` or you have `(results)` instead of `results` for example in `onSend` part. If you would change it as its in guides what output you will get? – PjoterS Jun 29 '21 at 09:06
  • @PjoterS I tried combining the code because independently it wasn't working. Just now I made it just "results" instead "(results)" and also added the semi-colons -- all like the second article (and took out the onQuickReply method) and there is still the same error. – Anne Willow Jun 30 '21 at 03:05
  • It seems that you are missing `catch`. You can check those two Stack threads which might be helpful: [Possible Unhandled Promise Rejection (id:0) Warning](https://stackoverflow.com/questions/47936361/possible-unhandled-promise-rejection-id0-warning) and [Possible Unhandled Promise Rejection (id: 0): undefined is not an object ('prevComponentInstance._currentElement')](https://stackoverflow.com/questions/46825738/possible-unhandled-promise-rejection-id-0-undefined-is-not-an-object-prevc) – PjoterS Jun 30 '21 at 12:06
  • @PjoterS It seems like result.queryResult is undefined after I printed in the console.log. I'm not sure why it is undefined. – Anne Willow Jul 05 '21 at 20:26

0 Answers0