본문 바로가기
PROGRAMING📚/React📑

[React]Error: Uncaught ReferenceError: React is not defined

별찌루 2023. 11. 22.
728x90
반응형

Uncaught ReferenceError: React is not defined

 

해당 메세지는 프로젝트에서 React 라이브러리를 올바르게 가져오지 못했거나 

참조 하지 못했을 때 나타나는 버그이다

 

 

잘 사용하던 프로젝트 코드였는데 

안 된다고 해서 개발자프롬프트로 확인을 했는데 다음과 같이 떠있었다

이 프로젝트는 Class 를 만드는 프로젝트였는데 프로젝트 파일을 생성하면서

React.Componet 에서 뭔가 문제가 생긴거 같다

 

뭔가 프로젝트가 충돌이 일어나면 react 를 업데이트를 한번 시켜주면 되는 경우가 있길래

이번에도 업데이트를 시켜주었다

npx update

 

그래도 리액트는 실행이 되는데 랜더링이 되지 않는...

 

이번에는 'React is not defined' 라서

리액트를 새로 설치해 보았다

npm install react

 

그래도 안됨...

 

[ 해결 방법 ]

처음에 import React from 'react';

파일 상단에 React 를 가져왔는지 확인하라는 글을 보고 작성을 했었는데 

안되길래 '어? 뭐지? '하고 다시 지웠었는데

 

마지막으로 다시 넣으닌까 됨.. 후...

앞에서 했던 것 들과 충족하면서 다시 되는듯함..

import React 가 최상단에 안와서 그런가 했는데

import 하단에 넣어도 문제없이 돌아감.. 왜...

 

 

해당 버그를 수정하기 위해서

다음 사이트에서 참고 하였다..

 

https://itsourcecode.com/referenceerror/referenceerror-react-is-not-defined/

 

Referenceerror: react is not defined

[SOLVED] Referenceerror: react is not defined, this error appears when the React library is incorrectly imported or referenced in a project.

itsourcecode.com

 

JavaScript 파일에서 React 를 사용하기 위해서

상단에 React 를 import 해준다

import React from 'react';

 

HTML 파일에서 React 를 사용하는 경우, 

React 라이브러리를 포함하는 스크립트 태그가

React를 사용하는 다른 스크립트 앞에 나오는 경우

 

즉, 자식 스크립트가 부모 스크립트 보다 위에 선언되는 경우

찾을수 없어서 다음과 같은 오류가 발생하는 경우가 있다

 

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

 

React 버전이 일치 하지 않는 경우,

여러 버전의 React 가 설치하면서

Import 문과 스크립트 태그가 설치된 버전과 일치 하지 않아 발생하는 경우가 있다

 

728x90
반응형

댓글