[React.JS] 작업환경 설정하는 중 에러
ReactDOM is not defined
bundle.js:sourcemap:10843 Uncaught ReferenceError: ReactDOM is not defined
at Object.<anonymous> (bundle.js:sourcemap:10843)
at __webpack_require__ (bundle.js:sourcemap:679)
at fn (bundle.js:sourcemap:89)
at Object.<anonymous> (bundle.js:sourcemap:1885)
at __webpack_require__ (bundle.js:sourcemap:679)
at module.exports (bundle.js:sourcemap:725)
at bundle.js:sourcemap:728
/src/components/index.js 에서
import React from 'react';
--> import ReactDom from 'react-dom'; // 오타
--> import ReactDOM from 'react-dom'; // 수정
import App from './components/App';
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement)
대소문자 오타로 오류 발생
ReactDOM로 지정한 모듈이 없어서 나는 오류입니다.
Target container is not a DOM element
bundle.js:1199 Uncaught Error: Target container is not a DOM element.
at invariant (bundle.js:1192)
at renderSubtreeIntoContainer (bundle.js:27779)
at Object.render (bundle.js:27889)
at Object.<anonymous> (bundle.js:10843)
at __webpack_require__ (bundle.js:679)
at fn (bundle.js:89)
at Object.<anonymous> (bundle.js:1885)
at __webpack_require__ (bundle.js:679)
at module.exports (bundle.js:725)
at bundle.js:728
/public/index.html 에서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
--> <div class="root"></div> <!-- 오타 -->
--> <div id="root"></div> <!-- 수정 -->
<script src="bundle.js"></script>
</body>
</html>
const rootElement = document.getElementById(';root';);
id 로 DOM을 찾는데, HTML 코드에서, class로 잘못 정의해서 난 오류 입니다.
Cannot read property 'string' of undefined
bundle.js:28329 Uncaught TypeError: Cannot read property 'string' of undefined
at Object.<anonymous> (bundle.js:28329)
at __webpack_require__ (bundle.js:679)
at fn (bundle.js:89)
at Object.defineProperty.value (bundle.js:28176)
at __webpack_require__ (bundle.js:679)
at fn (bundle.js:89)
at Object.<anonymous> (bundle.js:10836)
at __webpack_require__ (bundle.js:679)
at fn (bundle.js:89)
at Object.<anonymous> (bundle.js:1885)
React.PropTypes는 React v15.5부터 사용되지 않습니다. 대신 prop-types 라이브러리를 사용하십시오.
먼저 npm i prop-types --save를 실행하여 prop-types 패키지를 설치하십시오.
다음으로 prop-types 패키지를 다음과 같이 구성 요소에 사용하십시오
import React from 'react'
import PropTypes from 'prop-types'
export const AwesomeComponent = props => {
return(
<h1>Hello {props.name}</h1>
)
}
AwesomeComponent.propTypes = {
name: PropTypes.string.isRequired
}
기존 코드를 고치면 다음과 같습니다.
import React, {Component} from 'react';
import PropTypes from 'prop-types'
class Content extends Component {
render() {
return (
<div>
<h2>{this.props.title}</h2>
<p>
{this.props.body}
</p>
</div>
);
}
}
Content.propTypes = {
title: PropTypes.string,
body: PropTypes.string.isRequired
};
export default Content;
참고
'Programming > JavaScript' 카테고리의 다른 글
| React App Github Deploy (0) | 2018.04.21 |
|---|---|
| firestore & storage 사용하기 (0) | 2018.04.20 |
| [Leaflet] 플러그인 heatmap.js 사용하기 (0) | 2018.01.15 |
| [Leaflet] 플러그인 PolylineDecorator 사용하기 (0) | 2018.01.14 |
| [Leaflet] 시작하기 Quick Start Guide (0) | 2018.01.13 |
댓글