[Next.js] Emotion SWC有効する方法

2 min read

概要

Next.js v12.1.1-canary.12 で Emotion の SWC 対応が入った(v12.1.1 から正式に入るだろう)。

https://github.com/vercel/next.js/pull/34687

追記

Next.js v12.2にて Next.js Compiler での Emotion transform がサポートされた。

方法

  1. Babel の設定ファイル(babel.config.jsなど)を削除
    ※ Emotion 以外の設定がある場合は削除してしまうと問題
  2. @emotion/babel-pluginをアンインストール
  3. ドキュメントの設定をnext.config.jsに追加する
// next.config.js

module.exports = {
  compiler: {
    emotion: boolean | {
      // デフォルトはtrue。ビルドタイプがproductionの場合は無効となります。
      sourceMap?: boolean,
      // デフォルトは'dev-only'.
      autoLabel?: 'never' | 'dev-only' | 'always',
      // デフォルトは'[local]'.
      // 許容値: `[local]` `[filename]` and `[dirname]`
      // このオプションは、autoLabel が 'dev-only' または 'always' に設定されているときのみ機能します。
      // 生成されるラベルの形式を定義でます。
      // フォーマットは文字列で定義され、変数部分は角括弧 [] で囲まれる。
      // 例)labelFormat: "my-classname--[local]", ここで[local]は結果が代入される変数の名前に置き換えられる。
      labelFormat?: string,
      // デフォルトは undefined.
      // このオプションは、コンパイラがどの import を見て何を変換するかを指定する
      // Emotion のエクスポートを再出力した場合でも、transform を使用することができる
      importMap?: {
        [packageName: string]: {
          [exportName: string]: {
            canonicalImport?: [string, string],
            styledBaseImport?: [string, string],
          }
        }
      },
    },
  },
}
> Only `importMap` in `@emotion/babel-plugin` is not supported for now.

importMapは未対応とのこと。

importMapは未対応だったが、後日対応された。

その他

自環境では問題なかったが、コードによっては上手く動かないケースもあるみたいなので、正式リリース時には解消されていることを願う。

https://github.com/vercel/next.js/issues/30804#issuecomment-1073910073

このページをシェアする

Related Articles

[React 18] useEffect が2回実行されてしまう問題の対処法

確認した環境 / 解決方法 / 参考

[初学者向け] Next.js で開発を始める前に知っておきたいポイントと開発方法

想定読者 / 執筆同時のNext.js / Next.js とは / なぜ、Next.js を使うのか / セットアップ / ファイルベースルーティング / 事前レンダリング(プリレンダリング)とは / 参考

StorybookでEmotion 11がエラーになる問題の解決方法

状況 / 環境 / 解決方法 / 参考