[Error Handling] Selector div is not pure

[shren207]

어떤 에러인가요?

아래 button.module.css와 같이 파일을 작성하고 로컬 환경에서 작동시켜보았더니 아래와 같은 에러문구가 발생하였습니다.

클라이언트 에러 문구

제가 작성한 button.module.css 파일

에러 핸들링 방법

CSS modules을 사용하면, 즉 module.(css | scss | sass) 와 같이 앞에 module이 붙으면 html 태그를 단독으로 사용할 수 없는 듯 하다. 따라서 className이나 id로 작성해야 하는 듯 하다. 참고로 이 문제는 CRA에서는 발생하지 않으나 next.js 상에서만 발생하는 듯 하다. 그리고 일단 첫번째 속성이 html 태그가 아니면 되기에 다음과 같은 방식도 정상 동작한다.

// index.js
<div className={styles.container}>
    <ul>
        <li>Person One</li>
    </ul>
</div>

/* index.module.css */
.container {
  background-color: pink;
}
.container ul {
  list-style-type: none;
}

에러 핸들링을 위해 참고한 레퍼런스 링크

링크 링크