codestates / codestates/BanThing
[Error Handling] Selector div is not pure
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
### 어떤 에러인가요?
아래 button.module.css와 같이 파일을 작성하고 로컬 환경에서 작동시켜보았더니 아래와 같은 에러문구가 발생하였습니다.
> 클라이언트 에러 문구

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

### 에러 핸들링 방법


CSS modules을 사용하면, 즉 `module.(css | scss | sass)` 와 같이 앞에 module이 붙으면 html 태그를 단독으로 사용할 수 없는 듯 하다.
따라서 className이나 id로 작성해야 하는 듯 하다. 참고로 이 문제는 CRA에서는 발생하지 않으나 next.js 상에서만 발생하는 듯 하다.
그리고 일단 첫번째 속성이 html 태그가 아니면 되기에 다음과 같은 방식도 정상 동작한다.
```jsx
// index.js
- Person One
```
```css
/* index.module.css */
.container {
background-color: pink;
}
.container ul {
list-style-type: none;
}
```
### 에러 핸들링을 위해 참고한 레퍼런스 링크
[링크](https://github.com/vercel/next.js/discussions/17089)
[링크](https://stackoverflow.com/questions/62467903/targeting-pure-elements-in-next-js-with-css-modules)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.