카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

도저히 에러를 잡을 수 없어 질문드립니다 TT

20.10.09 17:49 작성 조회수 135

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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
<button style="cursor:pointer;display:block;width:991.2px;text-align:left;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;color:black;background:white;margin-bottom:1.5em;border:initial none initial">▶ 2 stack frames were collapsed.</button>
usePromise
C:/Users/98_07/Desktop/노드리액트/src/usePromise.ts:10
  7 | });
  8 | const isMounted = useRef(false);
 9 | useEffect(() => {
> 10 |  isMounted.current = true;
  | ^  11 |  if (!promiseOrFn) {
 12 |  setState({
  13 |  loading: false,<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:991.2px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>
<button style="cursor:pointer;display:block;width:991.2px;text-align:left;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;color:black;background:white;margin-bottom:1.5em;border:initial none initial">▶ 2 stack frames were collapsed.</button>
Module../src/index.js
C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/src/index.js:20
  17 | 
 18 | ReactDOM.render(
  19 |  <Provider
> 20 |  store={createStoreWithMiddleware(
  21 |  Reducer,
  22 |  window.__REDUX_DEVTOOLS_EXTENSION__ && // google redux 확장 사용 위함
 23 |  window.__REDUX_DEVTOOLS_EXTENSION__()<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:991.2px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>
__webpack_require__
C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:991.2px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>
fn
C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:150
  147 |  );
  148 |  hotCurrentParents = [];
 149 |  }
> 150 |  return __webpack_require__(request);
  | ^  151 | };
 152 | var ObjectFactory = function ObjectFactory(name) {
 153 |  return {<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:991.2px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>
1
http://localhost:3000/static/js/main.chunk.js:701:18
__webpack_require__
C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:991.2px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>
checkDeferredModules
C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:45
  42 |  }<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:991.2px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>
Array.webpackJsonpCallback [as push]
C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
  | ^  33 | };
 34 | function checkDeferredModules() {
  35 |  var result;<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:991.2px;text-align:left;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:65

This screen is visible only in development. It will not appear if the app crashes in production.

위에가 화면이 뜨는 에러 사항이고

특별히 react나 react dom의 중복 없는 것 같고

코드도 몇번이고 확인해 보았으나 오류 원인을 찾기가 힘이 듭니다.

연관 있을 법한 파일들을 올려 봅니다....

client > pacakge.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "http-proxy-middleware": "^1.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "^0.63.3",
    "react-redux": "^7.2.1",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
server > package.json
{
  "name": "boiler-plate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server/index.js",
    "backend": "nodemon server/index.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
  },
  "author": "ooo",
  "license": "ISC",
  "dependencies": {
    "antd": "^4.6.6",
    "bcrypt": "^5.0.0",
    "body-parser": "^1.19.0",
    "concurrently": "^5.3.0",
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.10.7",
    "react-promise": "^3.0.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}
LoginPage.js
import React, { useState } from 'react';
import Axios from 'axios';
import { useDispatch } from 'react-redux';
import { loginUser } from '../../../_action/user_action';

function LoginPage() {
  const dispatch = useDispatch();

  const [Email, setEmail] = useState(''); // useState 안에 들어가는 내용은 초기 상태
  const [Password, setPassword] = useState(''); // Password(state) -> 유저가 입력한 내용이 들어감

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value);
  }; // 타이핑을 즉시 반영하기 위함
  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value);
  };
  const onSubmitHandler = (event) => {
    event.preventDefault(); //아무 것도 ( 이메일이나 비밀번호 입력)하지 않아도 버튼을 누르면 페이지가 리프레쉬됨

    let body = {
      email: Email,
      password: Password,
    };

    dispatch(loginUser(body)); //redux 사용, LoginUser == action
    /* 해당 내용은 LoginUser action에서 처리
    Axios.post('api/users/login', body)
    .then(response =>{ })*/
  };
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100vh',
      }}
    >
      <form
        style={{ display: 'flex', flexDirection: 'column' }}
        onSubmit={onSubmitHandler}
      >
        <label>Email</label>
        <input type='email' value={Email} onChange={onEmailHandler} />
        <label>Password</label>
        <input type='password' value={Password} onChange={onPasswordHandler} />
        <br />
        <button>Login</button>
      </form>
    </div>
  );
}

export default LoginPage;

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

답변 1

답변을 작성해보세요.

강민석

2020.11.25

혹시 어떻게 해결하셨나요??

안서영

도저히 에러를 잡을 수 없어 질문드립니다 TT

이 글과 비슷한 Q&A

변수, useState 부분 질문있습니다.

link태그의 prefetching 질문

찜하기하고 해당글 상세페이지 이동시 찜 정보제대로 안내려오는 현상

3-4질문 계속합니다 ㅠㅠ 죄송합니다