Nextjs Emotion Cmponent Selector ( + SWC, MUI )

글을 작성하게된 이유

1. 현재 Nextjs v13 + Next compiler(SWC)을 사용
2. Emotion을 사용하며, MUI에 추가적인 Style을 Wrapping하여 사용
3. @emotion/babel-plugin의 components as selectors 기능을 사용하기 위해

---

MUI 문서

MUI문서에선 babel을 설정하라는 가이드라인을 제시

SWC를 사용하는 상황에서 babel을 사용할 수 없는 상황

module.exports = {
  ...
  plugins: [
    [
      "@emotion",
      {
        importMap: {
          "@mui/system": {
            styled: {
              canonicalImport: ["@emotion/styled", "default"],
              styledBaseImport: ["@mui/system", "styled"]
            }
          },
          "@mui/material/styles": {
            styled: {
              canonicalImport: ["@emotion/styled", "default"],
              styledBaseImport: ["@mui/material/styles", "styled"]
            }
          }
        }
      }
    ]
  ]
};

---

해결방법

Nextjs Compiler 옵션에 추가된 내용을 확인
https://github.com/vercel/next.js/commit/cb8fdc6db6280b847e752d884afbd99dd1290b40

const compilerConfig = {
  compiler: {
    // 콘솔 제거
    removeConsole: {
      exclude: ['error', 'info', 'warn'],
    },
    // Emotion Component Selector 추가
    emotion: {
      importMap: {
        '@mui/system': {
          styled: {
            canonicalImport: ['@emotion/styled', 'default'],
            styledBaseImport: ['@mui/system', 'styled'],
          },
        },
        '@mui/material/styles': {
          styled: {
            canonicalImport: ['@emotion/styled', 'default'],
            styledBaseImport: ['@mui/material/styles', 'styled'],
          },
        },
      },
    },
  },
};

next.config.js의 compiler에 추가

---

결과

1. @emotion/babel-plugin 에러 해결
2. 빌드된 next style에 NO_COMPONENT_SELECTOR로 인식되던 부분이 정상적으로 작동 ( components as selectors 기능 )