Почему возникает такая ошибка NEXT JS 13?

Question

[Vladislav Ivanov]

Подскажите пожалуйста почему в Next 13 такая ошибка:

Unhandled Runtime Error
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:
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.

Source
src\services\register.tsx (7:28) @ state

5 |
6 | const RegisterService = () => {
> 7 | const email = useSelector(state => state.email)
| ^
8 | const password = useSelector(state => state.password)
9 |
10 | createUserWithEmailAndPassword(auth, email, password)

Вот код:

"use client"
import { createUserWithEmailAndPassword } from "firebase/auth";
import {auth} from '../firebase/firebase'
import {useSelector} from "react-redux";

const RegisterService = () => {
const email = useSelector(state => state.email)
const password = useSelector(state => state.password)

createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;

})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});

}

export default RegisterService

Comments

[szQocks]

нормально оформи вопрос - как положено

и почему ты скинул именно этот код ? почему ты уверен что ошибка именно в этом коде ? если ты уверен что ошибка в этом коде дк исправь её епта

[Vladislav Ivanov]

szQocks, потому что ошибка пишется в этом компоненте.
Если бы я мог сам решить сюда не писал бы

[szQocks]

Vladislav Ivanov, весь компонент выложи в вопрос и оформи нормально, если это вообще компонент а не шляпа какая-то - RegisterService

[Vladislav Ivanov]

"use client" 
 
import { useDispatch } from "react-redux" 
import { setEmail, setPassword } from "@/actions/actions" 
import { useState } from "react" 
import RegisterService from "@/services/register" 
 
export default function Signup() { 
 
    const dispatch = useDispatch() 
     
    const [userEmail, setUserEmail] = useState("") 
    const [userPassword, setUserPassword] = useState("") 
     
    const saveEmail = (e:any) => { 
        e.preventDefault() 
       const data = e.target.value 
        setUserEmail(data) 
    } 
     
     
    const savePassword = (e:any) => { 
        e.preventDefault() 
        const data = e.target.value 
         setUserPassword(data) 
     } 
 
 
    const submitData = (e: any) => { 
        e.preventDefault() 
        dispatch(setEmail(userEmail)) 
        dispatch(setPassword(userPassword)) 
        RegisterService() 
    } 
 
 
    return ( 
        <div> 
            <h2>CREATE ACOUNT</h2> 
            <form onSubmit={submitData}> 
                <input type="text" placeholder="email" value={userEmail} required onChange={saveEmail}/> 
                <input type="password" placeholder="password" value={userPassword} required onChange={savePassword}/> 
                <button>Create</button> 
            </form> 
            </div> 
    ) 
}

Register Service :


"use client" 
import { createUserWithEmailAndPassword } from "firebase/auth"; 
import {auth} from '../firebase/firebase' 
import {useSelector} from "react-redux"; 
 
const RegisterService = () => { 
  const email = useSelector(state => state.email) 
  const password = useSelector(state => state.password) 
 
  createUserWithEmailAndPassword(auth, email, password) 
    .then((userCredential) => { 
      // Signed in  
      const user = userCredential.user; 
 
    }) 
    .catch((error) => { 
      const errorCode = error.code; 
      const errorMessage = error.message; 
      // .. 
    }); 
 
} 
 
export default RegisterService

[szQocks]

Vladislav Ivanov, ты нарушил правила хуков

[Vladislav Ivanov]

szQocks, я понял ну а как это по другом релизовать? Я как то понять не могу

[szQocks]

Vladislav Ivanov, вызвать createUserWithEmailAndPassword внутри submitData ,ты же можешь внутри submitData получить email, password

[Vladislav Ivanov]

szQocks, createUserWithEmailAndPassword - это же хук получаеться да ?

[szQocks]

Vladislav Ivanov, загуглив я прочитал что это метод класса, гугли парень

Answer 1

[Aetae]

Как ты используешь этот RegisterService?
Чтоб он работал, как и написано в ошибке, он должен быть компонентом.
Т.е. <RegisterService ...> или React.createElement(RegisterService, ...) .

Второй вариант: он может быть не компонентом, а хуком. Тогда он должен вызываться внутри другого компонента, а также иметь префикс use - useRegisterService(отсутствие префикса не приведёт к ошибке, но это стандарт).

Если ты просто вызываешь его где-то вне компонента как функцию - ничего работать не будет.

Comments

[Vladislav Ivanov]

"use client" 
 
import { useDispatch } from "react-redux" 
import { setEmail, setPassword } from "@/actions/actions" 
import { useState } from "react" 
import RegisterService from "@/services/register" 
 
export default function Signup() { 
 
    const dispatch = useDispatch() 
     
    const [userEmail, setUserEmail] = useState("") 
    const [userPassword, setUserPassword] = useState("") 
     
    const saveEmail = (e:any) => { 
        e.preventDefault() 
       const data = e.target.value 
        setUserEmail(data) 
    } 
     
     
    const savePassword = (e:any) => { 
        e.preventDefault() 
        const data = e.target.value 
         setUserPassword(data) 
     } 
 
 
    const submitData = (e: any) => { 
        e.preventDefault() 
        dispatch(setEmail(userEmail)) 
        dispatch(setPassword(userPassword)) 
        RegisterService() 
    } 
 
 
    return ( 
        <div> 
            <h2>CREATE ACOUNT</h2> 
            <form onSubmit={submitData}> 
                <input type="text" placeholder="email" value={userEmail} required onChange={saveEmail}/> 
                <input type="password" placeholder="password" value={userPassword} required onChange={savePassword}/> 
                <button>Create</button> 
            </form> 
            </div> 
    ) 
}


Вызываю так

[Aetae]

Vladislav Ivanov, т.е. это всё-таки хук? Переименуй в useRegisterService чтоб людей не путать.
А ошибка твоя в том, что хуки работают в компоненте. Не когда-то потом, когда submitData произойдёт, а при создании и последующих рендерах.
Это в принципе очевидно, если понимать как это всё работает, а не относится как к шайтан-машине.

[Vladislav Ivanov]

Page Login:

"use client"

import Image from 'next/image'
import googleImg from '../../assets/images/icons/google.png'
import styles from './login.module.scss'
import authWithGoogle from '../../services/authWithGoogle'
export default function Login () {
    return (
        <div className={styles.login}>
            <div className={styles.login__container}>
                <h1 className={styles.login__text}>LOGIN IN TO YOUR ACCOUNT</h1>
                <div className={styles.login__block}>
                    <div className={styles.google__login__block}>
                        <button className={styles.google__login__button} onClick={authWithGoogle}>
                            <Image src={googleImg} alt="login google icon" width={30} quality={100} placeholder='blur'/>
                            Google</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

Login Service: 

import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import {auth} from '../firebase/firebase'


const loginService = () => {

const provider = new GoogleAuthProvider();

signInWithPopup(auth, provider)
  .then((result) => {

    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    const user = result.user;
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    const email = error.customData.email;
    const credential = GoogleAuthProvider.credentialFromError(error);
  });
}

export default loginService

Странно тут все получилось

[Aetae]

Vladislav Ivanov, "здесь" у тебя обычная функция. Она не использует в себе хуки (use<some>), а потому может вызываться когда хочешь.

Хуки привязываются к компоненту в момент его создания, они должны быть вызваны внутри него и сразу. Если утрировать то хуки тупо опираются на глобальную переменную которая ставится со стартом компонента и убирается после, типа:

// отрисовка компонента внутри React
globalCurrentState = globalCurrentStateMap.get(Component);
globalCurrentStateIndex = 0
Component(...arguments)
globalCurrentState = null
globalCurrentStateIndex = null

// хук useState
function useState(stateValue) {
  // увеличиваем индекс хука относительно компонента на единицу
  globalCurrentStateIndex++;
  // получаем массив state для текущего вызова useState
  let stateArray = globalCurrentState[globalCurrentStateIndex];
  
  
  if (stateArray) { // если уже есть - просто возвращаем
    return stateArray;
  } else { // иначе
    // создаём setValue
    function setValue(newValue) {
      stateArray[0] = newValue;
    }
    // создаём массим state
    stateArray = [stateValue, setValue];
    
    // записываем в глобальную переменную
    globalCurrentState[globalCurrentStateIndex] = stateArray;
    
    // отдаём
    return stateArray;
  }
}

Очевидно, что "когда-то потом", когда submitData будет вызван - все глобальные переменные уже десять раз будут переопределены другими компонентами.

Конечно там всё намного сложнее под капотом, но основную суть этот код иллюстрирует.

В общем просто запомни: если внутри твоей функции используется хук(use<some>), то и сама функция становится хуком и не может работать вне корня компонента.

[Vladislav Ivanov]

Так и как же тогда реализовать то что я хочу ? Или может не париться и закинуть "сервис" в SignUp ?

[Aetae]

Vladislav Ivanov, не использовать внутри хуки. Т.е. не использовать useSelector.
Либо использовать useSelector снаружи и передавать в RegisterService уже полученные параметры. Либо вытащить глобальный redux и брать значения из него без всяких хуков.

В целом же, этот ответ "как реализовать" тебе ничем не поможет, потому что ты сломаешься через пять минут на следующей ошибке.
Лучше прочитай внимательно, что я написал и попытайся понять. Ну или если я тебе не люб - читай доки реакта. До просветления.

[Vladislav Ivanov]

Aetae - "функция становится хуком и не может работать вне корня компонента"
Как это вне корня? Извиняй за глупый вопрос если что

[Aetae]

Vladislav Ivanov, если непонятно, значит не подошла тебе абстракция, забудь.

Просто представь что вызываешь компонент как обычную функцию, всё что внутри будет вызвано сразу - может быть хуком и использовать хуки, всё что будет вызвано когда-то потом - нет.

const Component = (props) => {
  useBrain(); // ok

  const justHere = () => {
    useBrain() 
  }
  justHere() // ~ok

  setTimeout((() => {
    useBrain() // not ok
  }, 1)

  return <div onClick="justHere //not ok">...</div>
}

[szQocks]

Aetae,
ты ещё не устал нянчиться с автором ?)

const justHere = () => {
    useBrain() 
  }
  justHere() // ~ok

так не будет работать, так ты нарушаешь принципы хуков, хуки могут быть вызваны только в самом скоупе компонента, то есть не во вложенных каких-то скоупах и т.д

[Vladislav Ivanov]

szQocks, ну извиняйте что напрягаю.
Зато я понял, спасибо ☺️

[Aetae]

szQocks, прекрасно будет работать. То что делать так не-надо другой вопрос(потому и ~).
Тут, по сути, ты просто создаёшь хук на ходу и тут же используешь:

const Component = () => {
  const useJustHere = () => {
    useBrain() 
  }
  useJustHere() // ~ok

  return ...
}

Практически то же самое что:

const useJustHere = () => {
  useBrain() 
}
const Component = () => {
  useJustHere() // ok

  return ...
}

Разве что этот "хук" каждый рендер пересоздаётся, что может привести к куче непредвиденных(или предвиденных, если знаешь что делаешь) особенностей.

Vladislav Ivanov, ещё важно помнить:

const Component = (props) => {
  if(condition) {
    useBrain(); // not ok
  }

  return ...
}

т.к. condition может поменяться, а хуки всегда дожны бть вызваны по порядку, а то реакт не поймёт где какой хук.

[szQocks]

Aetae, ну да, такая запись равноценна тому что ты и написал - "создания хука на ходу", я немного не так взглянул на этот код, ты был прав, но если бы эта функция вызывалась где-то в обработчика на клике например то тогда вылетела бы ошибка встроенного линта в реакте про правила хуков, а если вызвана в основном скоупе то тогда является созданием хука на ходу

и согласен ещё с этим

То что делать так не-надо другой вопрос(потому и ~).

, такая запись не сказал бы что хорошая)