[에러] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Jay ·2022년 8월 7일
0

에러

Error: Element 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.

해결 방법

https://stackoverflow.com/questions/69211200/next-js-error-element-type-is-invalid-expected-a-string-for-built-in-componen/69232854#69232854?newreg=387a688374744c858ede8b7c6ed06030

import React from 'react';

_app.js에서 react를 import 하면 문제를 바로 해결할 수 있다.
next/image 하단에 react가 import 되었던게 문제인듯 한데, 왜 Error가 발생하는 지는 의문이다.

https://www.geeksforgeeks.org/why-do-you-need-to-import-react-in-functional-components/

브라우저는 html, css와 Javascript외의 언어는 이해하지 못한다.
따라서 React를 유효한 Javascript로 변환하기 위해 Babel이라는 webpack이 필요하게 된다.
Babel은 JSX를 객체로 변환하려 리턴한다.
Babel은 Create-react-app으로 프로젝트를 시작할 때 자동으로 포함된다.

  • JSX가 필요한 경우 React import가 필수
  • react 17부터는 수동으로 import하지 않아도 됨.
  • 단, 레거시 프로젝트 에서나 Hook을 사용하는 경우 수동으로 import 하여야 함.
profile
Jay입니다.

0개의 댓글