React + TypeScript + Emotion 環境構築の備忘録

2023-07-032023-07-04

前提・環境

パッケージ	バージョン
node.js	18.16.0
React	18.2.0
TypeScript	5.1.3
@emotion/react	11.11.1
ESlint	8.43.0
@typescript-eslint/eslint-plugin	5.60.1
@typescript-eslint/parser	5.60.1
@emotion/eslint-plugin	11.11.0

yarn create react-app --template typescriptで作成を前提とする。

Emotion の導入

ターミナルにてプロジェクトのディレクトリで下記のコードを入力する。

$ yarn add @emotion/react

ESlintを活用する場合はターミナルで下記のコードも入力する。

$ yarn add -D @emotion/eslint-plugin

tsconfig.json 編集

{
  "compilerOptions": {

    … 中略 …

    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  },

上記のうち、ないコードを追記する。

.eslint.js 編集

module.exports = {

  … 中略 …

  plugins: ['react', '@typescript-eslint', '@emotion'],
  rules: {

    … 中略 …

    '@emotion/jsx-import': 'error',
    '@emotion/pkg-renaming': 'error',
    'react/no-unknown-property': ['error', { ignore: ['css'] }],
    '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '^jsx$' }],
  },
};

plugin と rules の項目に追記する。

Emotion11 では rules に '@emotion/jsx-import': 'error',と'@emotion/pkg-renaming': 'error',が必須。

'@emotion/pkg-renaming': 'error','react/no-unknown-property': ['error', { ignore: ['css'] }],は、Unknown property 'css' found（’css’という不明なプロパティがある）のエラー対策。

'@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '^jsx$' }],は、
後述する/** @jsx jsx */用に{ jsx }を ‘@emotion/react’ からインポートする必要があるけど、
'jsx' is defined but never used.：'jsx' が宣言されていますが、その値が読み取られることはありませんの警告対策。
※ varsIgnorePattern:は正規表現を使って記述する必要がある。
　　'jsx'だと jsx を含む変数全て除外対象になるので、
　　jsx だけを除外するには完全一致の'^jsx$'と記述する。

コンポーネントでの Emotion の実例

import type { FC } from 'react';
/** @jsxRuntime classic */
/** @jsx jsx */
import { css, jsx } from '@emotion/react';

export const MyComponent: FC = () => {
  const strongText = css`
    color: #f00;
    font-size: 3rem;
  `;

  return (
    <div>
      <p css={strongText}>
        example text.
      </p>
    </div>
  );
};

React + TypeScript で Emotion をつかうには、
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
が必要。

しかし、VScodeなどで静的にエラーが出てなくてもyarn startで起動すると、
pragma and pragmaFrag cannot be set when runtime is automatic.
（’pragma’ および ‘pragmaFrag’ の設定が自動ランタイムモードの場合には使用できない）
とエラーが表示される場合は、
/** @jsxRuntime classic */と記述し手動ランタイムモードに変更することで/** @jsx jsx */が使用できる様になり、エラーが解消する。