Node.jsでwebpackバージョンに起因するModule not foundエラーが発生する。

実現したいこと

React + Node.js + MySQLでWebアプリを作成したいです。

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

MySQLとの接続のためにmysql2を使用しlocalhostのMySQLと接続したいのですが、
const mysql = require('mysql2/promise');
これを追加したところで複数のモジュールにおける以下のエラーが発生しています。
(下記は一例で、他にもstream-browserify、browserify-zlibのライブラリが不足しているとエラーが出ております。)

localhost
1Compiled with problems:
2
3ERROR in ./node_modules/mysql2/lib/commands/command.js 4:15-32
4
5Module not found: Error: Can't resolve 'timers' in '～\node_modules\mysql2\lib\commands'
6
7BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
8This is no longer the case. Verify if you need this module and configure a polyfill for it.
9
10If you want to include a polyfill, you need to:
11	- add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }'
12	- install 'timers-browserify'
13If you don't want to include a polyfill, you can use an empty module like this:
14	resolve.fallback: { "timers": false }

試したこと

webpackが4から5に移行することで発生するエラーとのことで、
webpackは最新のバージョンにしております。
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"

以下のqiitaの記事が同じ状況かと思われたため試したのですが、依然としてエラーの状況は変わりません。
https://qiita.com/stDeveloperAtm/items/dda93836f47abf608a23

質問について

1.番号リスト本状況を改善する方法があれば知りたいです。

2.番号リストcreate-react-appを使用してプロジェクトを作成しております。
上記参考ページ内と同等の状況で、webpack.config.jsを編集するという対応法が数多く見つかりますがnpm installコマンドによって生成されるnode_modules配下を編集することは出来ませんとの記載があります。
自分も本状況解決のために行き当たった記事の殆どがwebpack.config.jsの編集だったのですが、
根本的にプロジェクトを作り直したほうが良いでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

webpack.config.jsに下記を追加

java
1module.exports = {
2  // ...
3  resolve: {
4    fallback: {
5      "timers": require.resolve("timers-browserify"),
6      "stream": require.resolve("stream-browserify"),
7      "zlib": require.resolve("browserify-zlib")
8    }
9  }
10  // ...
11}

投稿2023/07/21 05:44

Ripple_py

総合スコア66

Ripple_py

2023/07/21 05:45

npm install timers-browserify stream-browserify browserify-zlib

Ripple_py

2023/07/21 06:00

node_modules ディレクトリや配下を直接編集することはありません。依存関係を追加または更新するには上記の用にnpm install または npm update コマンドを使用します。 webpack.config.js での設定変更は、Webpackが依存関係をどのように解決するかを決めているだけですまた、npm install コマンドは新しい依存関係をプロジェクトに追加します。これはnode_modules の内容に間接的に影響しますが、このディレクトリを直接編集するものではないです。