😎

React環境にて「BREAKING CHANGE: webpack < 5 used ~」を解決する方法

2022/12/11に公開約1,100字

エラー文

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

ログインするとコメントできます