codestates / codestates/BanThing

[Error Handling] Selector div is not pure

Open
#162 0 comments 0 reactions 1 assignee Claimed by @greenheadHQ View on GitHub
client error solved
Dominant language
TypeScript
Stars
0
Forks
2
PR merge metrics
No merged PRs in 30d

Description

### 어떤 에러인가요?
아래 button.module.css와 같이 파일을 작성하고 로컬 환경에서 작동시켜보았더니 아래와 같은 에러문구가 발생하였습니다.
> 클라이언트 에러 문구

![select div is not pure](https://user-images.githubusercontent.com/85833148/155440165-d78eefca-2386-4ce5-8e8a-e6db4620fc2f.png)

> 제가 작성한 button.module.css 파일
스크린샷 2022-02-24 오전 10 34 57

### 에러 핸들링 방법
![스크린샷 2022-02-24 오전 10 42 10](https://user-images.githubusercontent.com/85833148/155441017-2a9c59a9-7ff1-4907-b05b-bfbbf10d3a46.png)

![스크린샷 2022-02-24 오전 10 38 19](https://user-images.githubusercontent.com/85833148/155440641-9e4efc80-c629-4e89-bf7b-0418f0736fdb.png)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.