質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2195閲覧

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

takaya14

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/02/06 06:16

実現したいこと

現在表示されているエラーを解消して、
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

該当のソースコード

JS

1const path = require('path'); 2const glob = require('glob'); 3 4const entries = glob.sync("./src/**/*.js") 5module.exports = { 6 mode: 'development', 7 entry: entries, 8 target: 'node', 9 output: { 10 path: path.join(__dirname, "dist"), 11 filename: "bundle.js" 12 }, 13 experiments: { 14 topLevelAwait: true 15 }, 16 resolve: { 17 extensions: ['.js', '.json', 'wasm'] 18 } 19};

試したこと

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2023/02/06 07:50

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

2023/02/06 08:43

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

回答1

0

自己解決

JS

1const path = require('path'); 2const glob = require('glob'); 3 4const entries = glob.sync("./src/*.js") 5module.exports = { 6 mode: 'development', 7 entry: entries, 8 output: { 9 path: path.join(__dirname, "dist"), 10 filename: "bundle.js" 11 }, 12 experiments: { 13 topLevelAwait: true 14 }, 15};

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

投稿2023/02/06 08:45

takaya14

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。