Metaplexを実装すると「Module not found: Error: Can't resolve XXX」エラーが多発する

現象

MetaplexのJS のとおりに実装すると、「Module not found: Error: Can't resolve XXX」エラーが多発する。

Compiled with problems:X

ERROR in ./node_modules/@bundlr-network/client/build/common/chunkingUploader.js 16:33-50

Module not found: Error: Can't resolve 'crypto' in '/Users/user/myreact/node_modules/@bundlr-network/client/build/common'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/@bundlr-network/client/build/common/transaction.js 12:33-50

Module not found: Error: Can't resolve 'crypto' in '/Users/user/myreact/node_modules/@bundlr-network/client/build/common'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/arbundles/src/Bundle.js 14:17-34

Module not found: Error: Can't resolve 'crypto' in '/Users/user/myreact/node_modules/arbundles/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.

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


ERROR in ./node_modules/arbundles/src/DataItem.js 48:28-45

Module not found: Error: Can't resolve 'crypto' in '/Users/user/myreact/node_modules/arbundles/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.

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


ERROR in ./node_modules/arbundles/src/deepHash.js 15:17-34

Module not found: Error: Can't resolve 'crypto' in '/Users/user/myreact/node_modules/arbundles/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.

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


ERROR in ./node_modules/arbundles/src/signing/keys/Rsa4096Pss.js 11:17-34

Module not found: Error: Can't resolve 'crypto' in '/Users/user/myreact/node_modules/arbundles/src/signing/keys'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


ERROR in ./node_modules/avsc/lib/containers.js 19:9-24

Module not found: Error: Can't resolve 'zlib' in '/Users/user/myreact/node_modules/avsc/lib'

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: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/avsc/lib/specs.js 12:9-24

Module not found: Error: Can't resolve 'path' in '/Users/user/myreact/node_modules/avsc/lib'

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: { "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 }


ERROR

[eslint] 
src/App.tsx
  Line 12:3:  Expected an assignment or function call and instead saw an expression  @typescript-eslint/no-unused-expressions

Search for the keywords to learn more about each error.

原因

必要なモジュールが足りていないため。
CRA(create-react-app）やVITEなどによって、インストールしないといけないモジュールが必要になってくる。

対応

metaplex-foundation/js-examples - Starter Kits の各リンク先に、必要なモジュール郡が記載されている。

VITEの場合（一部抜粋）

npm install -D assert util crypto-browserify @esbuild-plugins/node-globals-polyfill rollup-plugin-node-polyfills

また、それぞれ設定も必要なため、それぞれ参照して対応が必要。