ブラウザで発生！謎のエラー「Uncaught ReferenceError: require is not defined」の原因と解決策を徹底解説！

2024-05-23

ブラウザで「Uncaught ReferenceError: require is not defined」エラーが発生する原因と解決策

このエラーは、ブラウザ上で JavaScript コードを実行しているときに発生し、require という関数が存在しない場合に発生します。

require 関数は、Node.js などのサーバーサイド JavaScript 環境で使用されるものであり、ブラウザ環境では標準で利用できません。ブラウザでモジュールを読み込む場合は、以下の方法で解決する必要があります。

解決策

スクリプトタグでモジュールを読み込む

最も簡単な方法は、<script> タグを使用してモジュールファイルを個別に読み込む方法です。

<script src="module1.js"></script>
<script src="module2.js"></script>
<script>
  // モジュールを使用するコード
</script>

バンドラーツールを使用する

Webpack や Rollup などのバンドラーツールを使用すると、複数のモジュールを 1 つのファイルにまとめることができます。バンドラーツールは、require 関数のようなモジュールシステムをブラウザ環境で実現するために、適切な形式に変換してくれます。

CDN を利用する

jQuery や lodash などの有名なライブラリは、多くの場合 CDN (Content Delivery Network) で提供されています。CDN からライブラリをロードすることで、自前でファイルを管理する必要がなくなり、require 関数を使用せずにライブラリを利用することができます。

上記以外にも、エラーの原因や解決策は状況によって異なる場合があります。問題解決に迷ったら、具体的なコードやエラーメッセージなどを共有して、より詳細なアドバイスを求めることをおすすめします。

<!DOCTYPE html>
<html>
<head>
  <title>Require is not defined</title>
</head>
<body>
  <script src="module1.js"></script>
  <script src="module2.js"></script>
  <script>
    // モジュール1の関数を使用する
    console.log(module1.greet());

    // モジュール2の変数を使用する
    console.log(module2.message);
  </script>
</body>
</html>

Webpack の場合

package.json ファイルに以下の内容を追加します。

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "dist/index.js",
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

webpack.config.js ファイルを作成し、以下の内容を追加します。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'dist/index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

import module1 from './module1';
import module2 from './module2';

console.log(module1.greet());
console.log(module2.message);

以下のコマンドを実行してバンドルを作成します。

npx webpack

作成された dist/index.js ファイルを HTML ファイルに読み込みます。

<!DOCTYPE html>
<html>
<head>
  <title>Require is not defined</title>
</head>
<body>
  <script src="dist/index.js"></script>
</body>
</html>

jQuery の場合

<!DOCTYPE html>
<html>
<head>
  <title>Require is not defined</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>
    // jQuery のメソッドを使用する
    $(document).ready(function() {
      $('h1').text('jQuery を使用しています');
    });
  </script>
</body>
</html>