😎
React環境にて「BREAKING CHANGE: webpack < 5 used ~」を解決する方法
エラー文
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }
webpack compiled with 1 error
- エラー文通り、インストールで解決するものもあれば出来ないモジュールがいて困った
結論
-
（記事書いてる最中に既に解決法があった↓）
-
若干自分と書き方が違うので、一応動いたソースを下記に載せておく。
//以下を追加
resolve: {
alias: {
"path": "path-browserify",
},
- 一番悩んだ点は、react のproject管理下において、webpackはどこに記述すべきかという点。
- 結論としては、
node_modules/react-scripts/config/webpack.config.js。モジュールのreact-scripts内にwebpackが存在するのでそこに記述すれば良い模様。
Discussion