【React】emotionの環境設定で躓いた話

CSS-in-JSのライブラリemotionの環境設定で躓いたのでメモ

まずはバージョン

• react　18.2.0
• @emotion/core　11.0.0　

/** @jsx jsx */
import { css, jsx } from '@emotion/core';

Module build failed (from ./node_modules/babel-loader/lib/index.js)

なんかモジュールが足りないのかもしれない…ということで下記をインストール

【参考】StackOverflow

npm install @emotion/react
npm install @emotion/css
npm install @emotion/styled

ERROR in [eslint] Error while loading rule ‘react/no-direct-mutation-state’: React pragma @jsxRuntime is not a valid identifier
Occurred while linting

SyntaxError: xxxx.jsx: pragma and pragmaFrag cannot be set when runtime is automatic

それでもエラーが出るのと、先頭で言われているのでそこを修正してみた。Reactのバージョン17からは
@jsxImportSourceなんだそうです。

/** @jsxImportSource @emotion/react */
import { css, jsx } from '@emotion/core';

まだまだエラーは消えません。

Module not found: Error: Can’t resolve ‘@emotion/react/jsx-dev-runtime’

@emotion/coreを@emotion/reactに変更してようやくビルドが通りました。

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