Vite+React+TypescriptでEmotion 11を使用可能にしてみる

Reactのプロジェクトのビルドツールとして、Viteを使用しはじめました。そのプロジェクトにEmotionのバージョン11を導入してみました。

使用した主なOSSのバージョン

OSS	バージョン
Vite	2.0.5
Emotion	11.1.5
React	17.0.0
Typescript	4.1.2

※ReactとTypescriptはViteで以下のコマンドを実行してインストールされたものを利用しています。

yarn create @vitejs/app my-app --template react-ts

Emotionのインストール

yarn add @emotion/react

css属性を理解させる

モジュールをインストールしただけだと、css属性を理解してくれないので、Qiitaなどに書いてあるサンプルプログラムを動かそうとすると動かなくて困ります。
例えば以下のようなJSXにした場合、TypeScriptはdivタグにcssなんていう属性はないよって怒られてしまいます。
Visual Studio Codeでも赤い波線でエラーと表示されてしまいます。

<div css={{ color: "red" }}>top page</div>

これを解決するには、tsconfig.jsonのcompilerOptions/typesに"@emotion/react/types/css-prop"を追加します。

{
  "compilerOptions": {
    〜
    "types": ["vite/client", "@emotion/react/types/css-prop"],
    〜
  }
  〜
}

@jsxプラグマを書きたくない

この時点で、tsxファイルの最初に@jsxプラグマを書けば Emotion は使用できるのですが、すべてのtsxファイルに書き込むのはちょっと面倒です。

/** @jsx jsx */
import { jsx } from "@emotion/react"

vite.config.tsを以下のように書けば上記を省くことができるようになります。
esbuildのエントリーを追記しましょう。

import { defineConfig } from "vite"
import reactRefresh from "@vitejs/plugin-react-refresh"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  esbuild: {
    jsxFactory: "jsx",
    jsxInject: `import { jsx } from "@emotion/react"`
  }
})

以上の設定をすれば@jsxプラグマの記述と@emotion/reactのインポートの記述は不要になります。
これらは Visual Studio Code 上でも同様に効くのでよかったら設定してみてください。

困ったこと

yarn dev実行時、高速実行を謳うViteなのに更新がとても遅くなる現象に遭遇しました。
私はウィルス対策ソフトとして ESET を使用しているのですが、 ESET のファイアウォールをOFFにしたところ改善しました。
なぜそれに気づいたかといえば、それは勘で気づいただけなので、詳しく理由はわかりませんが、ESET を使用している方で同じような現象に遭遇されている方はお試しください。