React-toastify: dispatcher is null and invalid hook calls

Question

I have a project where i tried to implement react-toastify. For that i installed the package with:

npm install --save react-toastify

Followed the example in Github:https://github.com/fkhadra/react-toastify

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import './App.css';
import Login from './components/login'
import Grid from './components/grid'
import Note from './components/note'
import Collab from './components/collab'
import Popup from './components/popup'

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div className="App">
      <div className="App-Header">
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/popup" element={<Popup />} />
          <Route path="/grid" element={<Grid />} />
          <Route path="/note" element={<Note />} />
          <Route path="/collab" element={<Collab />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

popup.jsx

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function Popup(){
  const notify = () => toast("Wow so easy!");
  return (
    <div>
      <button onClick={notify}>Notify!</button>
      <ToastContainer />
    </div>
  );
}

Compiled in the terminal i do not get any errors. In my browser, i do get multipe, which occure only when im at the route '/popup'.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Uncaught TypeError: dispatcher is null
    useReducer React
    C bundle.js:484188
    k bundle.js:484603
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    factory react refresh:6
    Webpack 24

The above error occurred in the <ToastContainer> component:

../node_modules/react-toastify/dist/react-toastify.esm.mjs/k<@http://localhost:3000/static/js/bundle.js:484603:12
div
Popup
RenderedRoute@http://localhost:3000/static/js/bundle.js:461523:7
Routes@http://localhost:3000/static/js/bundle.js:462154:7
div
div
App
Router@http://localhost:3000/static/js/bundle.js:462096:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:460195:7

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

I did re-install the node-modules folder, did not help.

I did deleted the tag in App.js and instead added an tag which contained the tag, did not help.

Answer 1

Issue solved with

npm uninstall react-toastify react-router-dom
npm install react-toastify@latest react-router-dom@latest