Emotionを10系から11系にアップグレード

2022/08/13

背景

ブログで利用しているnode_modulesをアップグレードしており, 以下のようにアップグレードした.

他にも変更があったようだが, 自分のブログでは上記の2つのみ利用していた.

アップデート後にとりあえずbuildしてみると, 以下のようなエラーが出た.

WebpackError: The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'`.

パッケージ名が @emotion/core から @emotion/react に変わったようなので, それに対応していく.
まずはインストールする.

$ yarn add @emotion/react

そしてインポート文を書き換えていく.

import { css, SerializedStyles } from '@emotion/core'
↓
import { css, SerializedStyles } from '@emotion/react'

再度, yarn gatsby build してみると以下の2つのエラーが出るようになった.

Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

Cannot find namespace 'NodeJS'

@emotion/core 11.0.0 のダウングレード.

$ yarn add @emotion/core@10.1.1

tsconfig.json のcompilerOptionsに以下を追加する.

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop", "node"]
  }
}

Twitterフォロー待ってます！