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

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

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

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

Node.js

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

React.js

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

解決済

npm run buildに失敗する(webpack)

hiroki88
hiroki88

総合スコア63

npm

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

Node.js

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

React.js

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

1回答

0リアクション

0クリップ

203閲覧

投稿2022/08/23 17:34

前提

チャットアプリを開発しています。
使用しているものは以下になります。
・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

module.exports = { // モード値を production に設定すると最適化された状態で、 // development に設定するとソースマップ有効でJSファイルが出力される mode: "development", // メインとなるJavaScriptファイル(エントリーポイント) entry: "./src/App.tsx", // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/build`, // 出力ファイル名 filename: "main.js" }, module: { rules: [ { // 拡張子 .ts もしくは .tsx の場合 test: /\.tsx?$/, // TypeScript をコンパイルする use: "ts-loader" } ] }, // import 文で .ts や .tsx ファイルを解決するため resolve: { extensions: [".ts", ".tsx", ".js", ".json"] }, target: ["web", "es5"], };

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

package.json

"scripts": { "start": "react-scripts start", "test": "react-scripts test", "eject": "react-scripts eject", "build": "webpack", "watch": "webpack -w" },

試したこと

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

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

npm

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

Node.js

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

React.js

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