Vite x Reactで、Phantomウォレット接続するだけのシンプル構成で発生したエラー。
現象
Phantomウォレットに接続すると以下のエラーが発生。
TypeError: Cannot read properties of undefined (reading 'connect')
at connectWallet (App.tsx:18:40)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
at executeDispatch (react-dom.development.js:9041:3)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7)
at processDispatchQueue (react-dom.development.js:9086:5)
at dispatchEventsForPlugins (react-dom.development.js:9097:3)
at react-dom.development.js:9288:12
原因
おそらく、Vite側のキャッシュが残ってしまっている?
対応
Viteキャッシュファイル(node_modules/.vite)やnode_modules, package-lock.jsonなどを削除しても解決できず、「vite.config.tsファイルを一旦適当に書き換えて起動 → 設定をもとに戻して起動」をしたら解決した。
(自分の場合は、https設定を追記して起動してから、設定をもとに戻した)