StoryBook(스토리북) PropTypes 오류 해결 방법

스토리북 튜토리얼을 진행하는데 아래와 같은 오류가 나타났다.

PropTypes is not defined
ReferenceError: PropTypes is not defined
    at ./src/components/Task.jsx (http://localhost:6006/components-Task-stories.iframe.bundle.js:343:9)
    ...이하생략

위와 같은 propTypes가 없다는 오류의 이유는 

React 15.5 이전 버전에서는 PropTypes를 별도로 import를 해야 했지만, React 15.5 버전 이후부터는 prop-types 패키지를 사용하여 PropTypes를 가져와야 합니다.

해결방법은 다음과 같습니다.

 

1.prop-types 패키지를 설치합니다.

• npm을 사용하는 경우: npm install prop-types
• yarn을 사용하는 경우: yarn add prop-types

2. Task.jsx 파일의 상단에 prop-types를 import 합니다.

import PropTypes from 'prop-types'

3. 파일 내부에서 PropTypes를 사용하는 부분에서 PropTypes를 prop-types로 변경합니다. 예를 들어, 이전 코드에서 PropTypes.string을 사용했다면, prop-types.string으로 변경합니다.