Vite x ReactでPhantomに接続すると「undefined (reading 'connect')」エラー

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設定を追記して起動してから、設定をもとに戻した)