안녕하세요! 강의 듣는 도중 오류가 발생하여서 문의드립니다

Question

store/configureStore.js

import { createWrapper } from 'next-redux-wrapper';

import { createStore } from 'redux';

import reducer from '../reducers/index'

const configureStore = () => {

const store = createStore(reducer);

store.dispatch({

type: 'CHANGE_NICKNAME',

data: 'JUNHYEONG'

})

return store;

};

const wrapper = createWrapper(configureStore, {

debug: process.env.NODE_ENV === 'development',

});

export default wrapper;

reducers/index.js

import { HYDRATE } from "next-redux-wrapper";

const initialState = {

user: {

isLoggedIn: false,

user: null,

signUpData: {},

loginData: {},

},

post: {

mainPosts: []

}

};

export const loginAction = (data) => {

return {

type: "LOG_IN",

data

}

}

export const logoutAction = () => {

return {

type: "LOG_OUT",

}

}

// const changeNickname = (data) => {

// return {

// type: 'CHANGE_NICKNAME',

// data,

// };

// }

// (이전상태, 액션) => 다음상태

const rootReducer = (state = initialState, action) => { // 이니셜스테이트와는 다른객체가 만들어진다 그래야 히스토리가 생성되니깐

switch(action.type) {

case HYDRATE:

return { ...state, ...action.payload}

case 'LOG_IN':

return {

...state,

user: {

...state.user, // 바꾸지 않고픈건 참조관계로 유지해주기

isLoggedIn: true,

user: action.data,

},

};

case 'LOG_OUT':

return {

...state,

user: {

...state.user, // 바꾸지 않고픈건 참조관계로 유지해주기

isLoggedIn: false,

user: null,

},

};

default:

return state;

}

};

export default rootReducer;

계속 아래와 같은 오류가 발생하ㅔㄴ요

4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined } 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. at resolveDispatcher (/Users/bbakjun/workspace/node_modules/react/cjs/react.development.js:1476:13) at useMemo (/Users/bbakjun/workspace/node_modules/react/cjs/react.development.js:1531:20) at Provider (/Users/bbakjun/workspace/node_modules/react-redux/lib/components/Provider.js:24:41) at processChild (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14) at resolve (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5) at ReactDOMServerRenderer.render (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22) at ReactDOMServerRenderer.read (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29) at renderToString (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27) at Object.renderPage (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/next/dist/next-server/server/render.js:50:851) at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:141:19)입니다 ㅠㅠ 오류가 발생하네요

1번이 문제인가해서 확인해봤는데 어떻게 봐야하는지 잘 모르겠습니다..

➜ front git:(bbakjun) ✗ npm ls react react-nodebird-front@1.0.0 /Users/bbakjun/workspace/reactNodeBird/front ├─┬ @ant-design/icons@4.6.2 │ ├─┬ rc-util@5.13.2 │ │ └── react@16.14.0 deduped │ └── react@16.14.0 deduped ├─┬ antd@4.16.7 │ ├─┬ rc-cascader@1.4.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-checkbox@2.3.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-collapse@3.1.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-dialog@8.5.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-drawer@4.3.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-dropdown@3.2.0 │ │ └── react@16.14.0 deduped │ ├─┬ rc-field-form@1.20.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-image@5.2.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-input-number@7.1.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-mentions@1.6.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-menu@9.0.12 │ │ ├─┬ rc-overflow@1.2.2 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-motion@2.4.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-notification@4.5.7 │ │ └── react@16.14.0 deduped │ ├─┬ rc-pagination@3.1.7 │ │ └── react@16.14.0 deduped │ ├─┬ rc-picker@2.5.14 │ │ └── react@16.14.0 deduped │ ├─┬ rc-progress@3.1.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-rate@2.9.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-resize-observer@1.0.0 │ │ └── react@16.14.0 deduped │ ├─┬ rc-select@12.1.13 │ │ ├─┬ rc-virtual-list@3.3.0 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-slider@9.7.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-steps@4.1.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-switch@3.2.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-table@7.15.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tabs@11.9.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-textarea@0.3.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tooltip@5.1.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tree-select@4.3.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tree@4.2.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-trigger@5.2.9 │ │ ├─┬ rc-align@4.0.9 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-upload@4.3.1 │ │ └── react@16.14.0 deduped │ ├─┬ react-dom@16.14.0 │ │ └── react@16.14.0 deduped │ └── react@16.14.0 deduped ├─┬ next@9.5.5 │ ├─┬ @next/react-dev-overlay@9.5.5 │ │ └── react@16.14.0 deduped │ ├── react@16.14.0 deduped │ ├─┬ styled-jsx@3.3.0 │ │ └── react@16.14.0 deduped │ └─┬ use-subscription@1.4.1 │ └── react@16.14.0 deduped ├─┬ react-redux@7.2.4 │ └── react@16.14.0 deduped ├── react@16.14.0 └─┬ styled-components@5.3.0 └── react@16.14.0 deduped

박준형 · Answer

package.json에서 라이브러리 버젼을 선생님과 모두 맞추니 되네요! 버젼이 중요하군요...

박준형 · Answer

오류가 잘 보이지 않아서 댓글로 올립니다!

박준형 · Answer

4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined } 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.     at resolveDispatcher (/Users/bbakjun/workspace/node_modules/react/cjs/react.development.js:1476:13)     at useMemo (/Users/bbakjun/workspace/node_modules/react/cjs/react.development.js:1531:20)     at Provider (/Users/bbakjun/workspace/node_modules/react-redux/lib/components/Provider.js:24:41)     at processChild (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)     at resolve (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)     at ReactDOMServerRenderer.render (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)     at ReactDOMServerRenderer.read (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)     at renderToString (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)     at Object.renderPage (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/next/dist/next-server/server/render.js:50:851)     at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:141:19)