サンプルコード
React.js で "Module not found: Can't resolve '@emotion/react'" エラーが発生する原因と解決方法
React.js で "Module not found: Can't resolve '@emotion/react'" エラーが発生する場合は、@emotion/react パッケージが正しくインストールされていないか、依存関係に問題があることが原因です。
原因
このエラーが発生する主な原因は以下の3つです。
@emotion/reactパッケージがインストールされていない@emotion/reactパッケージのバージョンが間違っている- 依存関係に問題がある
解決方法
以下の手順で問題を解決することができます。
@emotion/react パッケージをインストールする
npm install @emotion/react
npm ls @emotion/react
出力結果で、インストールされているバージョンがプロジェクトで必要なバージョンと一致していることを確認してください。
依存関係を確認する
package.json ファイルを確認し、@emotion/react パッケージの依存関係が正しく設定されていることを確認してください。
キャッシュを削除する
node_modules フォルダと package-lock.json ファイルを削除し、再度 npm install コマンドを実行します。
プロジェクトを再起動する
上記の手順で問題が解決しない場合は、プロジェクトを再起動してみてください。
- エラーメッセージの詳細
- 使用している React.js のバージョン
- 使用しているビルドツール (Webpack、Rollup など)
- 使用している CSS-in-JS ライブラリ (styled-components、emotion など)
import React from 'react';
import styled from '@emotion/styled';
const Button = styled.button`
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
`;
const App = () => {
return (
<div>
<Button>ボタン</Button>
</div>
);
};
export default App;
このコードを実行すると、青いボタンが表示されます。
説明
import React from 'react';：React ライブラリをインポートします。import styled from '@emotion/styled';：@emotion/reactパッケージのstyled関数をインポートします。const Button = styled.button：styled関数を使用して、button要素をスタイル設定します。{ background-color: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; }：ボタンのスタイルを定義します。const App = () => {：React コンポーネントを定義します。<Button>ボタン</Button>：Buttonコンポーネントをレンダリングします。</div>：div要素を終了します。export default App;：Appコンポーネントをデフォルトエクスポートします。
npm の代わりに Yarn を使用している場合は、以下のコマンドで @emotion/react パッケージをインストールできます。
yarn add @emotion/react
npx を使用する
npx コマンドを使用して、@emotion/react パッケージをグローバルにインストールすることもできます。
npx install -g @emotion/react
手動でインストールする
以下の手順で、@emotion/react パッケージを手動でインストールすることができます。
- ダウンロードしたソースコードをプロジェクトの
node_modulesフォルダに解凍します。 - プロジェクトの
package.jsonファイルに、@emotion/reactパッケージの依存関係を追加します。
ワークスペースを使用する
yarn workspace add @emotion/react
pnpm add @emotion/react
create-react-app を使用する
create-react-app を使用してプロジェクトを作成している場合は、以下のコマンドで @emotion/react パッケージをインストールできます。
npm install --save-dev @emotion/react
package.json ファイルで、@emotion/react パッケージのバージョンを指定することができます。
{
"dependencies": {
"@emotion/react": "^11.0.0"
}
}
.babelrc ファイルを作成する
.babelrc ファイルを作成し、以下の内容を追加することで、@emotion/react パッケージを使用することができます。
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@emotion/babel"]
}
TypeScript を使用する
TypeScript を使用している場合は、以下のコマンドで @types/emotion パッケージをインストールできます。
npm install --save-dev @types/emotion
Webpack 設定を変更する
Webpack を使用している場合は、Webpack 設定を変更して、@emotion/react パッケージを使用することができます。
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@emotion/babel']
}
}
}
]
}
};
注意事項
上記の方法を試しても問題が解決しない場合は、使用している React.js のバージョン、ビルドツール、CSS-in-JS ライブラリなどの情報を提供していただければ、さらに詳しく調査することができます。
reactjs
