JavaScript、Ruby on Rails、React.js で発生する "Uncaught ReferenceError: React is not defined" エラーの解説と解決方法

2024-04-02

"Uncaught ReferenceError: React is not defined" エラーの原因と解決方法

原因

React ライブラリの読み込み漏れ

React ライブラリがインストールされていない
React ライブラリのパスが間違っている
HTML ファイルに React ライブラリの <script> タグが記述されていない

使用している React ライブラリのバージョンと、プロジェクトで使用している他のライブラリのバージョンが互換性がない

モジュールの読み込み問題

Webpack や Rollup などのモジュールバンドラーを使用している場合、モジュールの設定が間違っている

解決方法

React ライブラリがインストールされていない場合は、npm install react または yarn add react を実行してインストールします。
React ライブラリのパスが間違っている場合は、正しいパスを指定します。

モジュールの設定の確認

設定が間違っている場合は、設定を修正します。

エラーメッセージの詳細を確認することで、原因を特定しやすくなります。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

HTML ファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="./app.js"></script>
</body>
</html>

このコードは、<h1>Hello, world!</h1> という文字列をブラウザに表示するシンプルな React アプリケーションです。

実行方法

上記のコードを index.html と app.js というファイル名で保存します。
ターミナルで npm start または yarn start を実行します。
ブラウザで http://localhost:3000 を開きます。

ブラウザに Hello, world! と表示されていれば、React アプリケーションが正常に動作していることを確認できます。

エラーメッセージ

上記のコードを正しく実行した場合、エラーメッセージは表示されません。

しかし、以下のいずれかの原因でエラーメッセージが表示される可能性があります。

Uncaught ReferenceError: React is not defined

Uncaught ReferenceError: Unable to resolve module 'react'

Uncaught ReferenceError: ReactDOM is not defined

エラーメッセージが表示された場合

原因を特定できない場合は、上記の解決方法を参照してください。

"Uncaught ReferenceError: React is not defined" エラーを解決する他の方法

CDN を使用して React ライブラリを読み込む

React ライブラリを CDN から読み込むことで、ローカル環境にライブラリをインストールする必要がなくなります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="./app.js"></script>
</body>
</html>

注意点

CDN を使用して React ライブラリを読み込む場合、以下の点に注意する必要があります。

CDN の URL が変更される可能性があるため、最新の情報を確認する必要があります。
CDN から読み込むライブラリのバージョンが古い可能性があるため、バージョンを確認する必要があります。

Babel を使用して JSX を変換する

JSX は React で使用される独自の構文です。Babel を使用して JSX を JavaScript に変換することで、ブラウザで直接実行することができます。

Babel のインストール

npm install babel-cli --global

JSX ファイル (app.jsx)

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));