[Next.js] Component selectors can only be used in conjunction with @emotion/babel-plugin 해결

Next.js에서 emotion을 사용하고 있었는데, 컴포넌트 선택자를 사용하려는 중에 이런 오류를 만났다.

Server Error
Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.

이게 뭐야!

 

컴포넌트 선택자는 상위 컴포넌트에서 하위의 컴포넌트를 선택해서 스타일링 하는 것을 의미한다.

import styled from '@emotion/styled'

const Child = styled.div`
  font-size: 14px;
`

const Parent - styled.div`
  ${Child} {
    background-color: yellow;
  }
`

 

next.config.js의 compiler 속성에 emotion: true를 설정해주면 해결 가능하다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...
  compiler: {
    emotion: true,
  },
}

module.exports = nextConfig

 

 

 

https://cheolsker.tistory.com/39