JSX Pragmaなしで@emotion/reactを使用（React16.14.0以降対応）
Gatsbyの3への更新の余波シリーズの第2弾。 emotionのcss propでJSXプラグマを要求されるようになった問題を修正しました。
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 を設定するだけ。簡単ですね。
{
"presets": [
[
"@babel/preset-react",
{ "runtime": "automatic", "importSource": "@emotion/react" }
]
],
"plugins": ["@emotion/babel-plugin"]
}この作業後、追加していた/** @jsx jsx */部分が不要になりエラー表示なったので、一括で置換して削除しました。
TypeScriptのエラー
上記の操作でプラグマを消すとコンポーネントのcss部分で以下のようなTypeScriptエラーが出るようになります。
型 '{ children: Element; css: SerializedStyles; }' を型 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' に割り当てることはできません。
プロパティ 'css' は型 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' に存在しません。この呼び出しに一致するオーバーロードはありません。
2 中 1 のオーバーロード, '(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<...>' に存在しません。
2 中 2 のオーバーロード, '(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用に設定を追記すれば完了です。
{
"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 の方を修正すれば解決しました。
{
"compilerOptions": {
//修正 "jsx": "react",
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
}
}このエラーは修正してもすぐには表示が消えず、反映させるにはVSCodeの再起動が必要でした。