TypeScript＋Reactでpath.joinなどのpathモジュールを使用したいときの対応

この記事は公開から1年以上経過しています。

TypeScript+React開発でNode.jsのpath.join()などを使うとTypeScriptのビルドで

Module not found: Error: Can’t resolve ‘path’ in ‘/xxx/src’
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.

のようなエラーが発生してビルドができない。

原因

クライアントサイドでNode.jsのpathコアモジュールを使用しようとしているため。

対応

エラーメッセージ

If you want to include a polyfill, you need to:

• add a fallback ‘resolve.fallback: { "path": require.resolve("path-browserify") }’
• install ‘path-browserify’
  If you don’t want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }

に従いクライアントサイドで使用可能なpath-browserify(と@types/path-browserify)を使用する。

以上です。