react-simple-chatbot

react-simple-chatbot copied to clipboard

Describe the bug Messages are doubled with each new trigger.

To Reproduce Steps to reproduce the behavior:

1. clean install the repo inside a fresh react app.
2. use the code example below.

Expected behavior messages should appear only once, as defined in the code. Instead, they appear multiple times (see screenshot)

Desktop (please complete the following information):

• OS: Mac OS Monterey
• Browser Latest Chrome, Safari

Code

import "./App.css";
import ChatBot from "react-simple-chatbot";

function App() {
  const steps = [
    {
      id: "0",
      message: "Message 0",
      trigger: "1",
    },
    {
      id: "1",
      message: "Message 1",
      trigger: "2",
    },
    {
      id: "2",
      message: "Message 2",
      end: true,
    },
  ];

  return (
    <div className="App">
      <ChatBot steps={steps} />
    </div>
  );
}

export default App;

I got the same problem...

I found out that it's related with create react app, but I don't know why. I switched to Vite and it worked then.

I've investigated more an found the difference that made it work for me. Before I used:

import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

which produced the error, switching it to

import { render } from "react-dom";
render(<App />, document.getElementById("root"));

made it work. Hope that helps.

Platform: - Next.js File:- next.config.js

#Issue Solve... Solution:- Change reactStrictMode value TRUE to FALSE

======= Code =======

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
};

module.exports = nextConfig;

With react 18 strict mode enable useEffect to run twice in development, that's why this library might be bugged

I've investigated more an found the difference that made it work for me. Before I used:

import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

which produced the error, switching it to

import { render } from "react-dom";
render(<App />, document.getElementById("root"));

made it work. Hope that helps.

This worked for me thanks!!!