Problem initializing WebChat in React 17.0.2

Hi, I’ve just installed a new instance of WebChat in my new React app and I having some issues while initializing the ReactWebChat component.

Screenshots

Version

Here is my package.json file:

{
  "name": "src",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "botframework-webchat": "^4.15.1",
    "http-proxy-middleware": "^2.0.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "sass": "^1.49.9",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "lint-fix": "eslint . --fix"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^8.11.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "prettier": "^2.6.0"
  }
}

Describe the bug

My code in the App.js file is the default React creates with the create-react-app command with the imported WebChat.

import logo from 'assets/logo.svg'
import './App.scss'
import React, { useMemo } from 'react'
import ReactWebChat, { createDirectLine } from 'botframework-webchat'

const App = () => {
  const directLine = useMemo(
    () =>
      createDirectLine({
        token: 'XXXXXX'
      }),
    []
  )

  console.log(directLine)

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <ReactWebChat directLine={directLine} />
    </div>
  )
}

export default App

Maybe the latest React version is not compatible with WebChat. This is the next thing I want to test out.

Steps to reproduce

Just open the webpage in localhost:3000.

Expected behavior

To not show an error in console and load WebChat.

Additional context

N/A

[Bug]

[pablo-abella]

@compulim sorry for my delay but I have been stuck in other project and haven’t been able to return to this until this week.

I finally set up my repo with React 17.0.2 and WebChat 4.15.1 successfully, using your example as template. Thanks for all the help.

Best!

[mhmuftee]

Hello @stevkan ,

I am having the same warning message but my webchat is rendered.

Will you fix this warning message in future?