teratail header banner
teratail header banner
質問するログイン新規登録
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

4641閲覧

npm run buildに失敗する(webpack)

hiroki88

総合スコア66

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/08/23 17:34

0

0

前提

チャットアプリを開発しています。
使用しているものは以下になります。
・Node.js v14.17.0
・React.js v17.0.0
・Webpack v4.44.2
・Webpack-cli v4.7.2
・Firebase v8.10.0

実現したいこと

「npm run build」でビルドを行いたいのですが実行すると以下のエラーメッセージが表示されビルドができない状況になってしまっています。
このエラーを解決してビルドができるようにしたいです。

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

iMacBook-Air:my-app ***$ npm run build > my-app@0.1.0 build /Users/***/Git/Portfolio/my-app > webpack [webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.target should be one of these: "web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload" | function -> Environment to build for Details: * configuration.target should be one of these: "web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload" * configuration.target should be an instance of function npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! my-app@0.1.0 build: `webpack` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the my-app@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/***/.npm/_logs/2022-08-23T17_18_39_463Z-debug.log

該当のソースコード

webpack.config.jsのソースを載せます。

webpack.config.js

1module.exports = { 2 // モード値を production に設定すると最適化された状態で、 3 // development に設定するとソースマップ有効でJSファイルが出力される 4 mode: "development", 5 6 // メインとなるJavaScriptファイル(エントリーポイント) 7 entry: "./src/App.tsx", 8 // ファイルの出力設定 9 output: { 10 // 出力ファイルのディレクトリ名 11 path: `${__dirname}/build`, 12 // 出力ファイル名 13 filename: "main.js" 14 }, 15 module: { 16 rules: [ 17 { 18 // 拡張子 .ts もしくは .tsx の場合 19 test: /\.tsx?$/, 20 // TypeScript をコンパイルする 21 use: "ts-loader" 22 } 23 ] 24 }, 25 // import 文で .ts や .tsx ファイルを解決するため 26 resolve: { 27 extensions: [".ts", ".tsx", ".js", ".json"] 28 }, 29 target: ["web", "es5"], 30 };

package.jsonのscripts部分を抜粋しています。

package.json

1"scripts": { 2 "start": "react-scripts start", 3 "test": "react-scripts test", 4 "eject": "react-scripts eject", 5 "build": "webpack", 6 "watch": "webpack -w" 7 },

試したこと

エラー内容からして使用しているモジュールとwebpackのバージョンが合っていないか、もしくは使用できない文字を使用していると思い調べたのですが、似たエラーは記事にありましたがこちらのエラーに関する記事が無く解決方が分からない状態になっております。

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

何か他に必要な情報があれば追記致しますのでよろしくお願いします。
ぜひわかる方がいましたらご教示いただきたいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

記載のwebpack.config.jsの書き方だと、webpack5を使用する必要があります。
webpackのバージョンを上げてください。

追記

targetの記法が違います。
webpack4 webpack5

投稿2022/08/24 01:19

編集2022/08/25 05:31
k4a

総合スコア983

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

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

hiroki88

2022/08/24 17:13

ご教示ありがとうございます。 どのあたりがwebpack4だと使用できないかは分かりますでしょうか?
hiroki88

2022/08/31 14:35

ありがとうございます!バージョンを上げたら解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.30%

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

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

質問する

関連した質問