Reactでemotionが反応しない
解決したいこと
Reactでemotionを使おうとしているのですが、ページが真っ白になってしまい上手く反応しません。
Reactのversionは18.2.0、emotionのversionは11.0.0です。
Typescriptは入れていません。
発生している問題・エラー
コンソールにはエラーが出力されずsuccessfullyとなっています。
開発者ツールのコンソールでは下記のエラーが出ています。
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
該当するソースコード
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
function App() {
return (
<h1
css={css`color: red;`}
>
Hello world
</h1>
);
}
export default App;
自分で試したこと
・公式ドキュメントを見て.babelrcの内容を下記に変更しましたが変わりませんでした。
{
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic",
"importSource": "@emotion/react"
}
}
]
],
"plugins": ["@emotion/babel-plugin"]
}
Reactを学習し始めたばかりなので、初歩的なミスだったらすみません。
もし解決方法をご存じの方がいらっしゃればお教えいただけると幸いです。
0
