Error: invalid bot configuration

Question

I am trying to use LexV2 in my react application but react application fails with the errorUncaught Error: invalid bot configuration at AWSLexV2Provider.ts:109:1 at Array.forEach (<anonymous>) at AWSLexV2Provider.configure (AWSLexV2Provider.ts:104:1) at InteractionsClass.addPluggable (4.chunk.js:363939:19) at Amplify.ts:90:1 at Array.map (<anonymous>) at AmplifyClass.addPluggable (Amplify.ts:85:1) at ./src/views/Auth/LexBot/LexBot.js (LexBot.js:8:1) at webpack_require (bootstrap:790:1) at fn (bootstrap:150:1) at ./src/containers/DefaultLayout/DefaultLayout.js (LogoIcon.png:1:1) at webpack_require (bootstrap:790:1) at fn (bootstrap:150:1)

import React, { Component } from "react";
import { Button } from 'reactstrap';
import { Amplify } from 'aws-amplify';
import awsconfig from './LexBotConfig';
import { ChatBot } from "aws-amplify-react";
import { AWSLexV2Provider } from '@aws-amplify/interactions';

Amplify.addPluggable(new AWSLexV2Provider());
Amplify.configure(awsconfig);
// Imported default theme can be customized by overloading attributes
// const myTheme = {
//   ...AmplifyTheme,
//   sectionHeader: {
//     ...AmplifyTheme.sectionHeader,
//     backgroundColor: '#0000ff'
//   }
// };

console.log(awsconfig)
class LexBot extends Component {

  handleComplete(err, confirmation) {
    if (err) {
      alert('Bot conversation failed')
      return;
    }

    alert('Success: ' + JSON.stringify(confirmation, null, 2));
    return 'Hope we helped, Thank you! what would you like to do next?';
  }

  render() {
    return (
      <div className="App">
        <header className="Angel-Bot">
          {/* <h1 className="Angel-Bot">Welcome to Angel-Bot</h1> */}
        </header>
        <ChatBot
          botName="AE-SimpleQnABot"
          title="Angel-Bot"
          // theme={myTheme}
          welcomeMessage="Welcome, Please ask me a question?"
          // onComplete={this.handleComplete.bind(this)}
          clearOnComplete={true}
          conversationModeOn={false}
        />
      </div>
    );
  }
}

export default LexBot;

My configuration data


var awsconfig = {
  Auth: {
    identityPoolId: "XXXXXX",
    region: 'us-west-2'
  },
  Interactions: {
    bots: {
      //Lex2 Bot
      "AE-SimpleQnABot":
      {
        "name": "AE-SimpleQnABot",
        "botId": "XXXXX",
        "aliasId": "XXXXX",
        "localeId": "en_US",
        "region": "XXXXXX",
        "providerName": 'AWSLexV2Provider',
      }
    }
  }
};

export default awsconfig;

{/*

Welcome to Angel-Bot

*/}

); } } export default LexBot; ``` My configuration data ``` var awsconfig = { Auth: { identityPoolId: "XXXXXX", region: 'us-west-2' }, Interactions: { bots: { //Lex2 Bot "AE-SimpleQnABot": { "name": "AE-SimpleQnABot", "botId": "XXXXX", "aliasId": "XXXXX", "localeId": "en_US", "region": "XXXXXX", "providerName": 'AWSLexV2Provider', } } } }; export default awsconfig; ```

Answer

You are encountering the `Uncaught Error: invalid bot configuration at AWSLexV2Provider.ts` as the LexBotConfig is not formatted correctly. As seen in the source code [here](https://github.com/aws-amplify/amplify-js/blob/cfd206257cce6087ee76ab030543bfb4889978e8/packages/interactions/src/Providers/AWSLexV2Provider.ts#L82-L101), this error occurs when there is lack of/invalid LexBot properties.

Could you please try formatting the configuration correctly as follows (notice the removal of double quotes and rename LexBot reference) -
```
var awsconfig = {
    Auth: {
      identityPoolId: "XXXXXX",
      region: 'us-west-2'
    },
    Interactions: {
      bots: {
        //Lex2 Bot
        SimpleQnABot:
        {
          name: "AE-SimpleQnABot",
          botId: "XXXXX",
          aliasId: "XXXXX",
          localeId: "en_US",
          region: "XXXXXX",
          providerName: 'AWSLexV2Provider',
        }
      }
    }
  };
  
  export default awsconfig;
```

Error: invalid bot configuration

Relevant content