작성
·
472
0
안녕하세요 선생님! 강의 잘 듣고 있습니다.
다름아니라 제가 강의들으면서 따라 만들고 있는데요.
movien detail 페이지에서 웹은 정상적으로 잘 작동하나 콘솔창에
아래와 같은 2종류의 에러가 총 35개가 뜨는데 구글에
검색하면서 나오는 해결 방법으로 이리저리 해봤는데
잘 안되서 질문 드립니다. 어떻게 해야할까요?
---------------1번 종류
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at MovieInfo.js:8.
in MovieInfo (at MovieDetail.js:50)
in div (at MovieDetail.js:46)
in div (at MovieDetail.js:40)
in MovieDetail (created by Context.Consumer)
in withRouter(MovieDetail) (at auth.js:38)
in AuthenticationCheck (created by Context.Consumer)
in Route (at App.js:25)
in Switch (at App.js:21)
in div (at App.js:20)
in Suspense (at App.js:18)
in App (at src/index.js:29)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:28)
in Provider (at src/index.js:21)
-------------------2번 종류
Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundPosition) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.
in div (at MainImage.js:5)
in MainImage (at MovieDetail.js:41)
in div (at MovieDetail.js:40)
in MovieDetail (created by Context.Consumer)
in withRouter(MovieDetail) (at auth.js:38)
in AuthenticationCheck (created by Context.Consumer)
in Route (at App.js:25)
in Switch (at App.js:21)
in div (at App.js:20)
in Suspense (at App.js:18)
in App (at src/index.js:29)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:28)
in Provider (at src/index.js:21)
혹시나 해서 제 깃허브 주소 첨부드립니다.
https://github.com/AyoungWon/movie-site
답변 부탁드릴게요 감사합니다.
---------------------
질문 올린뒤 계속 검색하다가 dependency 업데이트 하라는 말이 있어서
전부 최신 버전으로 업데이트 했더니 에러는 계속 나고 비슷한 warning이긴 한데
1번 종류 에러가 아래처럼 바뀌었습니다.
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at MovieInfo.js:8.
2번 종류 에러도 여전히 있구요.. 웹은 일단 잘 돌아가는데 왜일까요 ㅠㅠㅠㅠ
답변 2
1
-------------------2번 종류
Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundPosition) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.
이 에러는 리렌더링 될때 값이 없어도 css 속성이 렌더링 되버려서 생기는 부분이에요
그래서 강사님께서 앞에 {MainMovieImage && 로 감싸주셨고 이렇게 했는데도 같은 에러가 발생하면
useState 초기화할때 useState(null) 이렇게 쓰면 해결되요
0
useState(null) 하고 {MainMovieImage && 했는데도 error 뜨네요
Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundSize) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.
at div
at MainImage (http://localhost:3000/static/js/bundle.js:781:18)
at div
at LandingPage (http://localhost:3000/static/js/bundle.js:615:78)
at AuthenticationCheck (http://localhost:3000/static/js/bundle.js:2173:81)
at Routes (http://localhost:3000/static/js/bundle.js:92612:5)
at div
at Suspense
at App
at Router (http://localhost:3000/static/js/bundle.js:92545:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:92025:5)
at Provider (http://localhost:3000/static/js/bundle.js:89209:20)
// MovieDetail.js
Movie state가 null로 초기화 되었는지 확인해보세요^^
const [Movie, setMovie] = useState(null);
또한 return 할 때
{Movie && <MainImage />}
단축평가로 useEffect가 실행되어 Movie 상태가 저장 됐을때 실행되도록 하세요 :)