webpackを使用したときにブラウザでUncaught ReferenceError: require is not definedのエラーが表示される

Question

実現したいこと

現在表示されているエラーを解消して、
jsファイルを動くようにしたいです。

前提

Webサイトを作っています。webpackを使ってjsファイルを一つに統合して、
ローカル環境で検証をした時にエラーが表示されてしまいます。

発生している問題・エラーメッセージ

bundle.js:2 Uncaught ReferenceError: require is not defined
    at 2781 (bundle.js:2:460334)
    at __webpack_require__ (bundle.js:2:924727)
    at 8875 (bundle.js:2:378146)
    at __webpack_require__ (bundle.js:2:924727)
    at bundle.js:2:925011
    at bundle.js:2:925140

該当のソースコード

const path = require('path');
const glob = require('glob');

const entries = glob.sync("./src/**/*.js")
module.exports = {
  mode: 'development',
  entry: entries,
  target: 'node',
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
  experiments: {
    topLevelAwait: true
  },
  resolve: {
    extensions: ['.js', '.json', 'wasm']
  }
};

試したこと

htmlファイルにbundle.jsを読み込む際に<script type="module" src="bundle.js"></script>
になっていることを確認しました。
また、package.jsonファイルに"type": "module"が記載されていないことも確認しました。

補足情報（FW/ツールのバージョンなど）

M1チップのMacBook Air
macOS Ventura 13.0.1
Chromeブラウザを使用して開発しています

必要な情報が他にも必要でしたらご連絡ください。
よろしくお願いいたします。

Comments

[hoshi-takanori]

ブラウザでは require は使えなかったような。というか、「該当のソースコード」は webpack.config.js と思われますが、ブラウザで動かしたいなら target: 'node', はまずいのでは…。

[takaya14]

ご質問いただきありがとうございます。
おっしゃる通りでございました。

Answer 1

const path = require('path');
const glob = require('glob');

const entries = glob.sync("./src/*.js")
module.exports = {
  mode: 'development',
  entry: entries,
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
  experiments: {
    topLevelAwait: true
  },
};

target: 'node'と
resolve: {
extensions: ['.js', '.json', 'wasm']
}を削除することで
問題は解決されました。