inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

[리뉴얼] React로 NodeBird SNS 만들기

TypeError: Cannot read property 'getState' of undefined 에러 질문

383

긴장한 곰

작성한 질문수 25

0

웹게임 강좌에서 배운 내용과 이번 강의를 들으면서 배운 내용을 토대로 반응속도를 체크하는 웹사이트를 개인 프로젝트겸 제작해보고 있었습니다. 그런데 아래와 같은 오류가 계속해서 발생합니다.

구글링을 해보니 보통 pages/_app.js에서 오타가 나면 발생한다는데... 잘 모르겠습니다. 아래는 제 _app.js입니다.

import React from 'react';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css';
import Head from 'next/head';
import Helmet from 'react-helmet';
import wrapper from '../store/configureStore';

const App = ({ Component }) => {
    return (
        <>
            <Helmet>
                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
                <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet" />
            </Helmet>
            <Head>
                <meta charSet="utf-8"/>
                <title>반응속도체크</title>
            </Head> 
            <Component />
        </>
    );
};

App.propTypes = {
    Component: PropTypes.elementType.isRequired,
}

export default wrapper.withRedux(App);

만약 위 코드에서 wrapper.withRedux(App)이 아니라 export default App; 으로 써줄 경우에는

위 사진과 같은 에러가 발생합니다

store/configureStore.js는 ReactBird 코드를 그대로 갖다써서 오타는 없는 것 같습니다.

Next.js nodejs react express redux

답변 1

0

제로초(조현영)

next-redux-wrapper 7버전인가요? 7버전은 강좌 버전인 6버전과 코드가 달라집니다. getServerSideProps가 달라요. 공지사항(새소식) 참고하세요.

0

긴장한 곰

next-redux-wrapper를 7버전을 쓰고 있었어서 6버전으로 바꿔줬는데도 동일한 에러가 계속 발생하네요 ㅠㅠ

0

제로초(조현영)

redux 설정에서 오타가 난 것 같긴 합니다. 한가지 방법은 제 깃헙 소스코드 초반 부분(리덕스 적용한 부분)을 복사한 후 거기서 다시 시작하시는 겁니다.

0

긴장한 곰

store/configureStore.js

import { createWrapper } from 'next-redux-wrapper';
import { applyMiddleware, createStore, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';

import reducer from '../reducers';
import rootSaga from '../sagas';

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const enhancer = process.env.NODE_ENV === 'production'
    ? compose(applyMiddleware(...middlewares))
    : composeWithDevTools(applyMiddleware(...middlewares));
  const store = createStore(reducer, enhancer);
  store.sagaTask = sagaMiddleware.run(rootSaga);
  return store;
};

const wrapper = createWrapper(configureStore, {
  debug: process.env.NODE_ENV === 'development',
});

export default wrapper;

package.json

{
  "name": "responsecheck_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next"
  },
  "author": "taewoong",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "antd": "^4.16.11",
    "axios": "^0.21.1",
    "immer": "^9.0.5",
    "next": "^10.2.3",
    "next-redux-wrapper": "^6.0.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-redux": "^7.2.4",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-saga": "^1.1.3",
    "styled-components": "^5.3.0",
    "upgrade": "^1.1.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.31.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}

pages/_app.js

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import 'antd/dist/antd.css';
import Helmet from 'react-helmet';

import wrapper from '../store/configureStore';

const App = ({ Component }) => (
    <>
        <Helmet>
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
            <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet" />
        </Helmet>
        <Head>
            <meta charSet="utf-8"/>
            <title>반응속도체크</title>
        </Head> 
        <Component />
    </>
);

App.propTypes = {
    Component: PropTypes.elementType.isRequired,
}

export default wrapper.withRedux(App);

제로초님 깃헙에서 그대로 갖다썼는데도 계속 같은 에러가 발생하네요...아무리봐도 이유를 모르겠습니다ㅠㅠ 하루종일 이 에러만 보니 정신이 혼미해지네요

https://github.com/Taewoong1378/ResponseCheck_Site

깃헙에 올려놨으니 시간 여유되실때 봐주시면 정말 감사하겠습니다 ㅠㅠ

0

긴장한 곰

오랜 인고의 시간 끝에 해결했습니다!

넥스트 버젼 질문

0

90

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

192

1

특정 페이지 접근을 막고 싶을 때

0

116

2

createGlobalStyle의 위치와 영향범위

0

102

2

인라인 스타일 리렌더링 관련

0

98

2

vsc 에서 npm init 설치시 오류

0

157

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

160

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

359

1

url 오류 질문있습니다

0

215

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

391

1

sudo certbot --nginx 에러

0

1293

2

Minified React error 콘솔에러 (hydrate)

0

477

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

255

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

338

1

npm run build 에러

0

525

1

front 서버 npm run build 중에 발생한 에러들

0

399

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

350

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

290

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

249

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

206

1