The above error occurred in the <Provider> component

Question

can't find way how to resolve this problem.

Errors in browser:

1. Uncaught Error: 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:

   • You might have mismatching versions of React and the renderer (such as React DOM)
   • You might be breaking the Rules of Hooks
   • 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.

2. The above error occurred in the component:

   Provider@http://localhost:3000/static/js/bundle.js:49534:15

   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.

INDEX.JS

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';

import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import { Provider } from 'react-redux'
import rootReducer from './Redux/Reducers/index.js'


const store = createStore( rootReducer, composeWithDevTools() )

ReactDOM.render(
  <Provider store={ store }>
    <Router />
  </Provider >,
  document.getElementById( 'root' ) );

Reducers/index.js

import loginPageReducer from './LoginPage.js'
import { combineReducers } from 'redux'


const rootReducer = combineReducers( {
   loginPageReducer
} )

export default rootReducer

Reducers/LoginPage.js

const INIT_STATE = {
   view: 'login',
   msg: '',
   loader: false,
}

const loginPageReducer = ( state = INIT_STATE, action ) =>
{

   switch ( action.type )
   {
      case "LOADER_OFF":
         return state.loader = false

      case "LOADER_ON":
         return state.loader = true

      case "MSG_SET":
         return state.msg = action.msg

      case "MSG_CLEAR":
         return state.msg = ''

      case "VIEW_CHANGE":
         return state.view = action.view

      default:
         return state;
   }
}


export default loginPageReducer

loginPage component

import React, { useState } from 'react'
import '../Styles/loginPage.scss'
import axios from 'axios'
import { useDispatch, useSelector } from 'react-redux'
import loginPageActions from '../Redux/actions/LoginPage'

export default function LoginPage () 
{
   const { msg_clear, msg_set, loader_off, loader_on, view_change } = loginPageActions
   const msg = useSelector( state => state.LoginPageReducer.msg )
   const view = useSelector( state => state.LoginPageReducer.view )
   const loader = useSelector( state => state.LoginPageReducer.loader )
   const dispatch = useDispatch()

   const [inputs, setInputs] = useState( {
      username: '',
      password: '',
      password2: '',
      email: ''
   } )

   const handleInputs = function ( e )
   {
      const { name, value } = e.target
      setInputs( { ...inputs, [name]: value } )
   }


   const handleSubmit = async ( e ) =>
   {
      try 
      {
         e.preventDefault();
         dispatch( msg_clear() )
         dispatch( loader_on() )

         if ( view === login)
         {
            // logowanie
            const query = await axios( {
               method: 'post',
               url: '/api/users/login',
               data: {
                  username: inputs.username,
                  password: inputs.password
               }
            } )

            const token = query.data.token
            localStorage.setItem( "token", token );
            return window.location.href = "/kalkulator"

         }
         else
         {
            //rejestracja
            const query = await axios( {
               method: 'post',
               url: '/api/users/register',
               data: {
                  username: inputs.username,
                  password: inputs.password,
                  password2: inputs.password2,
                  email: inputs.email
               }
            } )

            if ( query.status === 200 )
            {
               dispatch( msg_set( 'Zarejestrowano, możesz się zalogować' ) )
               dispatch( view_change( true ) )
            }
         }
      }
      catch ( err ) 
      {
         if ( err ) return dispatch( msg_set( err.response.data.msg ) )
      }
      finally
      {
         dispatch( loader_off() )
      }
   }



   /////////////
   /// Renderowanie widoku
   /////////////


   return (
      <main>
         <div id="MainContainerStyle">
            <span id="thatWhitePartOnBottom"></span>
            <header>
               <h1 id="HeaderH1" >Kalkulator mas</h1>
            </header>



            <button className="Buttons" onClick={ () => dispatch( view_change( !view ) ) }>
               { view ?
                  `Already have account? Click to log in!`
                  :
                  `Doesn't have account? Click me if you want to register new one` }
            </button>


            <form onSubmit={ handleSubmit } id="Form">
               <input type="text"
                  value={ inputs.username }
                  placeholder={ view ? 'username' : 'Login or E-mail' }
                  name="username" required onChange={ handleInputs }
               />

               { view ?
                  <input type="email"
                     placeholder="email"
                     name="email"
                     value={ inputs.email }
                     required
                     onChange={ handleInputs } />
                  :
                  null
               }
               <input type="password"
                  value={ inputs.password }
                  placeholder="Password:"
                  name="password"
                  required
                  onChange={ handleInputs }
               />

               { view ?
                  <input type="password"
                     value={ inputs.password2 }
                     placeholder="Password again:"
                     name="password2"
                     required
                     onChange={ handleInputs } />
                  :
                  null
               }
               <input type="submit" className="Buttons" />

               { loader ? <span className="loader"></span> : null }
               { msg !== '' ? <p className="msg">{ msg }</p> : null }
            </form>
         </div>
      </main>
   )
}

Router

import { BrowserRouter, Routes, Route } from "react-router-dom";
import './Styles/global.scss'

import LoginPage from "./Pages/LoginPage";
import Kalkulator from "./Pages/Kalkulator";

function App ()
{
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={ <LoginPage /> } />
          <Route path="/kalkulator" element={ <Kalkulator /> } />
        </Routes>
      </BrowserRouter>
    </>
  )
}

export default App;

Answer 1

might be this problem: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

..or maybe "react-redux" is not installed, check package.json