こんにちわ。都内でフリーランスエンジニアをしております。大城です。
本記事ではcreate-react-app(※以下cra)で作成したプロジェクトにemotionを導入してJSX Pragmaを使用せずcss propを有効にする方法を紹介します。
また各ツールの説明は省くので、webpack等々ある程度の知識がある方が対象です。
・create-react-app 5.0.1
・react 18.2.0
まずはcreate-react-appを叩いてプロジェクトを作成します。templateにはtypescriptを指定します。
$ npx create-react-app sample-project --template typescript
$ cd sample-project
今回はnpm ejectを使用せずにcraの基本構成をオーバーライドする形でemotionを導入するため、オーバーライドに必要な以下をパッケージをインストールします
$ npm install react-app-rewired customize-cra –save-dev
npm scriptsをreact-scripsからreact-app-rewiredに移行するため、実行に必要なconfig-overrides.jsファイルをプロジェクトルートに作成し、以下を記述してBabelの上書きを有効にします。
const { override, useBabelRc } = require("customize-cra");
入会申込
ログインmodule.exports = override(useBabelRc());"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject"},これでBabelの設定を上書きできる様になりました。
emotionと必要なBabelプラグインをインストールしていきます。
また今回はcss propを使用するため@emotion/styledはインストールしません。
$ npm install --save @emotion/react
$ npm install --save-dev@babel/preset-react @babel/plugin-transform-react-jsx@emotion/babel-plugin
Babelの構成を作成していきます。
プロジェクトルートに.babelrcファイルを作成して以下の様に書き換えます。{
"presets": [
[
"@babel/preset-react",
{ "runtime": "automatic", "importSource": "@emotion/react" }
]
],
"plugins": ["@emotion/babel-plugin",
[
"@babel/plugin-transform-react-jsx",
{
"throwIfNamespace": false,
"runtime": "automatic",
"importSource": "@emotion/react"
}
]
]
}
以上でトランスパイルには成功するようになりました。
ただtsconfigにも同じように設定しないとVScode上でエラーを吐き続けるためそちらも書き換えていきます。
craで作成したプロジェクトはtsconfigを書き換えようとしてもコンパイル時に強制的に削除されます。
なので今回はプロジェクトルートにtsconfig.extends.jsonを作成し、tsconfigからそれをextendsする形で設定を有効にします。
tsconfig.extends.jsonを以下の様にします。
{ "compilerOptions": { "jsxImportSource": "@emotion/react", }}{ "extends": "./tsconfig.extends.json", ...}今回はcraでjsx pragmaを使用せずemotionのcss propを使用する手順を紹介していきました。
公式ページの方にも説明がない(craを使用する場合はjsx pragmaを使えと書いてある)のですが、babel使えるようにしてるし何とかならないかなーと色々試してみたら意外と簡単にできました。
皆さんもcss propを使用する際は参考にしてみてください。
