title: The above error occurred in the <Provider> component
body: <p>can't find way how to resolve this problem.</p>
  <p><strong>Errors in browser:</strong></p>
  <ol>
  <li><p>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:</p>
  <ul>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app See <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow noreferrer">https://reactjs.org/link/invalid-hook-call</a> for tips about how to
  debug and fix this problem.</li>
  </ul>
  </li>
  <li><p>The above error occurred in the  component:</p>
  <p>Provider@http://localhost:3000/static/js/bundle.js:49534:15</p>
  <p>Consider adding an error boundary to your tree to customize error
  handling behavior. Visit <a href="https://reactjs.org/link/error-boundaries" rel="nofollow noreferrer">https://reactjs.org/link/error-boundaries</a>
  to learn more about error boundaries.</p>
  </li>
  </ol>
  <p><strong>INDEX.JS</strong></p>
  <pre><code>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(
    &lt;Provider store={ store }&gt;
      &lt;Router /&gt;
    &lt;/Provider &gt;,
    document.getElementById( 'root' ) );
  </code></pre>
  <p><strong>Reducers/index.js</strong></p>
  <pre><code>import loginPageReducer from './LoginPage.js'
  import { combineReducers } from 'redux'
  
  
  const rootReducer = combineReducers( {
     loginPageReducer
  } )
  
  export default rootReducer
  </code></pre>
  <p><strong>Reducers/LoginPage.js</strong></p>
  <pre><code>const INIT_STATE = {
     view: 'login',
     msg: '',
     loader: false,
  }
  
  const loginPageReducer = ( state = INIT_STATE, action ) =&gt;
  {
  
     switch ( action.type )
     {
        case &quot;LOADER_OFF&quot;:
           return state.loader = false
  
        case &quot;LOADER_ON&quot;:
           return state.loader = true
  
        case &quot;MSG_SET&quot;:
           return state.msg = action.msg
  
        case &quot;MSG_CLEAR&quot;:
           return state.msg = ''
  
        case &quot;VIEW_CHANGE&quot;:
           return state.view = action.view
  
        default:
           return state;
     }
  }
  
  
  export default loginPageReducer
  </code></pre>
  <p><strong>loginPage component</strong></p>
  <pre><code>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 =&gt; state.LoginPageReducer.msg )
     const view = useSelector( state =&gt; state.LoginPageReducer.view )
     const loader = useSelector( state =&gt; 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 ) =&gt;
     {
        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( &quot;token&quot;, token );
              return window.location.href = &quot;/kalkulator&quot;
  
           }
           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 (
        &lt;main&gt;
           &lt;div id=&quot;MainContainerStyle&quot;&gt;
              &lt;span id=&quot;thatWhitePartOnBottom&quot;&gt;&lt;/span&gt;
              &lt;header&gt;
                 &lt;h1 id=&quot;HeaderH1&quot; &gt;Kalkulator mas&lt;/h1&gt;
              &lt;/header&gt;
  
  
  
              &lt;button className=&quot;Buttons&quot; onClick={ () =&gt; dispatch( view_change( !view ) ) }&gt;
                 { view ?
                    `Already have account? Click to log in!`
                    :
                    `Doesn't have account? Click me if you want to register new one` }
              &lt;/button&gt;
  
  
              &lt;form onSubmit={ handleSubmit } id=&quot;Form&quot;&gt;
                 &lt;input type=&quot;text&quot;
                    value={ inputs.username }
                    placeholder={ view ? 'username' : 'Login or E-mail' }
                    name=&quot;username&quot; required onChange={ handleInputs }
                 /&gt;
  
                 { view ?
                    &lt;input type=&quot;email&quot;
                       placeholder=&quot;email&quot;
                       name=&quot;email&quot;
                       value={ inputs.email }
                       required
                       onChange={ handleInputs } /&gt;
                    :
                    null
                 }
                 &lt;input type=&quot;password&quot;
                    value={ inputs.password }
                    placeholder=&quot;Password:&quot;
                    name=&quot;password&quot;
                    required
                    onChange={ handleInputs }
                 /&gt;
  
                 { view ?
                    &lt;input type=&quot;password&quot;
                       value={ inputs.password2 }
                       placeholder=&quot;Password again:&quot;
                       name=&quot;password2&quot;
                       required
                       onChange={ handleInputs } /&gt;
                    :
                    null
                 }
                 &lt;input type=&quot;submit&quot; className=&quot;Buttons&quot; /&gt;
  
                 { loader ? &lt;span className=&quot;loader&quot;&gt;&lt;/span&gt; : null }
                 { msg !== '' ? &lt;p className=&quot;msg&quot;&gt;{ msg }&lt;/p&gt; : null }
              &lt;/form&gt;
           &lt;/div&gt;
        &lt;/main&gt;
     )
  }
  </code></pre>
  <p><strong>Router</strong></p>
  <pre><code>import { BrowserRouter, Routes, Route } from &quot;react-router-dom&quot;;
  import './Styles/global.scss'
  
  import LoginPage from &quot;./Pages/LoginPage&quot;;
  import Kalkulator from &quot;./Pages/Kalkulator&quot;;
  
  function App ()
  {
    return (
      &lt;&gt;
        &lt;BrowserRouter&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; element={ &lt;LoginPage /&gt; } /&gt;
            &lt;Route path=&quot;/kalkulator&quot; element={ &lt;Kalkulator /&gt; } /&gt;
          &lt;/Routes&gt;
        &lt;/BrowserRouter&gt;
      &lt;/&gt;
    )
  }
  
  export default App;
  </code></pre>