React #ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

에러문구

리엑트를 다루는 기술 9장 컴포넌트 스타일링 진행 중 sass 경로 간소화 설정 에러가 발생하였습니다. 

Failed to compile

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

---

에러 발생 원인 - CRA 버전차이

yarn eject 후 webpack.config.dev.js 와 webpack.config.prod.js 가 생성된다고 적혀 있는 책과 달리 webpack.config.js 한 파일만 생성되었습니다. veloper님 포스트엔 한 파일만 있는 것과, 책이 2018년 발행본인 것을 보아

cra(create-react-app) 버전 차이로 인한 현상이었습니다. cra2버전 부터는 한 파일로 생성된다고 합니다. 현재 3버전까지 릴리즈 되어 있습니다.

(▼ 2019년 8월 10일에 작성된 veloper님 포스트)

velog.io/@velopert/react-component-styling\

---

에러 해결 방법

webpack.config.js 에서 test: sassRegex 로 작성된 스코프 안의 use를 아래 소스로 수정하면 정상적으로 작동됨을 확인하였습니다.

작성일 기준 버전정보

yarn create-react-app : v3.4.1

package.json > sass-loader : ^10.0.3

(▼ 2019년 12월 31일에 작성된 madpotato1713님 포스트)

velog.io/@madpotato1713/%EB%A6%AC%EC%95%A1%ED%8A%B8-sass-loader-%EC%84%A4%EC%A0%95-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95-%EC%98%A4%EB%A5%98-options-has-an-unknown-property-includePaths.-These-properties-are-valid-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

리액트 sass-loader 설정 커스터마이징 오류 'options has an unknown property 'includePaths'. These properties are val

---

참고링크

(▼ cra 릴리즈 github 주소)

github.com/facebook/create-react-app/releases/tag/v3.4.1

Release v3.4.1 · facebook/create-react-app