前提
チャットアプリを開発しています。
使用しているものは以下になります。
・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/ツールのバージョンなど)
何か他に必要な情報があれば追記致しますのでよろしくお願いします。
ぜひわかる方がいましたらご教示いただきたいです。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/08/24 17:13
2022/08/31 14:35