JSX Pragma

어제 이거 때문에 개고생했다.

import { css } from "@emotion/react";

const index => () => (
	<div
    	css={css`blablabla`}  
    >Test</div>
);

위 처럼 적으면, Chrome devtools 에서 다음처럼 변하였다...

<div style="{Object object}">

이유는 emotion 은 React.createElement 대신에 jsx 함수를 사용하기 때문에 babel 설정이 이루어져야 한다

해당부분에 대해서는 JSX 에서 CSS 를 사용하는데 nextjs 가 zero-config 인 framwork 라 bable 설정으로 emotion jsx 를 사용못하기에 생기는 상황인것 같다.
실제로 Emotion 에서 다음처럼 이야기 하고 있다.

css prop 을 사용할때, source file 가장 위쪽에 jsx pragma 를 설정해!!
이 옵션은 babel configuration 을 설정할 수 없는 프로젝트에 css prop 기능을 testing 하는제 적합해!!

라고 말한다.
또한

예를 들어 Create React App 4 같은 new JSX runtimes 를 이미 사용한다면,
/** @jsx jsx */ paragma 는 작동하지 않아!
/** @jsxImportSource @emotion/react 를 대신해서 사용해야해!!

라고 말한다.
그러면서 제외하면 css 가 [Object Object] 로 render 될것이라고 말한다.

nextjs 에서 emotion 의 css 사용시 JSX Pragma 붙이도록 하자 ㅜㅜ