【React】vConsoleでXMLhttpRequest is not defined がでる時の対処法

TL;TR

ts(js)ファイルの上部でimportしないで、useEffect内でimportする。

useEffect(() => {
    const setupVConsole = async () => {
      const VConsole = (await import('vconsole')).default;
      new VConsole();
    }
    setupVConsole();
}, []);

https://github.com/Tencent/vConsole/issues/655
cleanUp関数はどうやって書けばいいんだろう。。

vConsole

webViewアプリのwebコンテンツ実機テストなどスマホでもconsoleを見たい時に便利なパッケージ。
CookieやwebStorageなども確認できるのでとても重宝しています。
https://github.com/Tencent/vConsole

エラーと対処法

Reactで公式ドキュメントの通りにするとエラーになる

公式ドキュメントの抜粋

import VConsole from 'vconsole';

const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ theme: 'dark' });

// call `console` methods as usual
console.log('Hello world');

// remove it when you finish debugging
vConsole.destroy();

エラー

ReferenceError: XMLHttpRequest is not defined 

原因

vConsoleのパッケージ内で使われている「XMLHttpRequest」はブラウザAPIなので、いわゆるモダンフロントエンド開発などNode環境で制作している段階では定義されていないから。

対処法

ts(js)ファイルの上部でimportしないで、useEffect内でimportする。

useEffect(() => {
    const setupVConsole = async () => {
      const VConsole = (await import('vconsole')).default;
      new VConsole();
    }
    setupVConsole();
}, []);

でもこれ、cleanUp関数を書くのが難しい。。