thumbnail_gatsby_logo

JSX Pragmaなしで@emotion/reactを使用(React16.14.0以降対応)

公開日2021.08.11
更新日2021.08.14

Gatsbyの3への更新の余波シリーズの第2弾。 emotionのcss propでJSXプラグマを要求されるようになった問題を修正しました。

目次目次
  • Gatsby3にしたらemotionからなんかエラーが出るようになった
  • プラグマを不要にする
  • 作業
  • TypeScriptのエラー
  • 対処
  • 後始末
  • 追記

Gatsby3にしたらemotionからなんかエラーが出るようになった

正確にはGatsby というよりは @emotion/core から @emotion/react に更新したせいかも。 作業時はさっさと更新を完了したかったので、emotion使用ファイルに以下の JSX プラグマを追加して凌ぎました。

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

ですが、やっぱり無駄な記述はしたくないですね。 なので公式の解説通りに babel設定を修正 します。

プラグマを不要にする

ここで採用している方法は、新しい React 16.14.0 以降用用なので注意してください。

If you are using the compatible React version (>=16.14.0) then you can opt into using the new JSX runtimes by using such configuration:

// Google翻訳 互換性のあるReactバージョン(> = 16.14.0)を使用している場合は、次のような構成を使用して、新しいJSXランタイムの使用を選択できます。

ちなみに、この作業をした時の当ブログの React バージョンは 17.0.2 でした。

古い React の場合は以下の記事にある @emotion/babel-preset-css-prop を使うそうです。 Emotion - @emotion/babel-preset-css-prop

作業

まずは必要なライブラリをインストール。

npm i @babel/preset-react @emotion/babel-plugin

そして .babelrc を設定するだけ。簡単ですね。

.babelrc
{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

この作業後、追加していた/** @jsx jsx */部分が不要になりエラー表示なったので、一括で置換して削除しました。

【参考】 Emotion - The css Prop

TypeScriptのエラー

上記の操作でプラグマを消すとコンポーネントのcss部分で以下のようなTypeScriptエラーが出るようになります。

'{ children: Element; css: SerializedStyles; }' を型 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' に割り当てることはできません。
  プロパティ 'css' は型 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' に存在しません。
この呼び出しに一致するオーバーロードはありません。
  21 のオーバーロード, '(props: GatsbyLinkProps<unknown> | Readonly<GatsbyLinkProps<unknown>>): GatsbyLink<unknown>' により、次のエラーが発生しました。
    型 '{ children: (string | Element)[]; to: string; css: SerializedStyles; onClick: overwrite_click_event_type; }' を型 'IntrinsicAttributes & IntrinsicClassAttributes<GatsbyLink<unknown>> & Readonly<GatsbyLinkProps<unknown>> & Readonly<...>' に割り当てることはできません。
      プロパティ 'css' は型 'IntrinsicAttributes & IntrinsicClassAttributes<GatsbyLink<unknown>> & Readonly<GatsbyLinkProps<unknown>> & Readonly<...>' に存在しません。
  22 のオーバーロード, '(props: GatsbyLinkProps<unknown>, context: any): GatsbyLink<unknown>' により、次のエラーが発生しました。
    型 '{ children: (string | Element)[]; to: string; css: SerializedStyles; onClick: overwrite_click_event_type; }' を型 'IntrinsicAttributes & IntrinsicClassAttributes<GatsbyLink<unknown>> & Readonly<GatsbyLinkProps<unknown>> & Readonly<...>' に割り当てることはできません。
      プロパティ 'css' は型 'IntrinsicAttributes & IntrinsicClassAttributes<GatsbyLink<unknown>> & Readonly<GatsbyLinkProps<unknown>> & Readonly<...>' に存在しません。

対処

これもTypeScript用に設定を追記すれば完了です。

tsconfig.json
{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  }
}

【参考】 Emotion - TypeScript

後始末

以上、修正完了です。 後はimport { jsx } from '@emotion/react'とプラグマ用にインポートしていた jsx を消して終了。

//import { jsx, css } from '@emotion/react'
import { css } from '@emotion/react'

作業後に gatsby build して問題が出なければ完了ということで。

追記

tsconfig.json に"jsxImportSource": "@emotion/react"を設定すると以下のようなエラーが出るようになりました。

オプション 'jsx''react' の場合、オプション 'jsxImportSource' を指定することはできません。ts
Specify module specifier used to import the JSX factory functions when using jsx: react-jsx*.`

See more: https://www.typescriptlang.org/tsconfig#jsxImportSource

エラーが出る jsxImportSource ではなく、jsx の方を修正すれば解決しました。

tsconfig.json
{
  "compilerOptions": {
    //修正 "jsx": "react",
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  }
}

このエラーは修正してもすぐには表示が消えず、反映させるにはVSCodeの再起動が必要でした。

Top
Back to Top
トップへ戻る