title: React and IPFS - Uncaught (in promise) TypeError: PubsubRouter is not a constructor
body: <p>I am trying to fetch some json data on IPFS but keep getting hit by this error in the console on page load (and on click).</p>
  <blockquote>
  <p>Uncaught (in promise) TypeError: PubsubRouter is not a constructor: pubsub-adapter.js:17</p>
  </blockquote>
  <p>Heres my basic <em>App.tsx</em>:</p>
  <pre class="lang-js prettyprint-override"><code>import { ipfsFetch } from &quot;ipfs-fetch&quot;
  import React, { useState } from &quot;react&quot;
  import &quot;./App.css&quot;
  
  function App() {
      const [tokenId, setTokenId] = useState()
  
      const fetchOnIpfs = async (tokenId: number) =&gt; {
          return await ipfsFetch(`&lt;cid&gt;/${tokenId}.json`)
      }
  
      return (
          &lt;div className='App'&gt;
              &lt;input onChange={e =&gt; setTokenId(e.target.value)} /&gt;
              &lt;button onClick={() =&gt; fetchOnIpfs(tokenId)}&gt;TEST&lt;/button&gt;
          &lt;/div&gt;
      )
  }
  
  export default App
  </code></pre>
  <p>I am using the <code>ipfs-fetch</code> package uses the <code>ipfs-core</code> under the hood. I've tried using <code>ipfs-core</code> directly and other package ipfs packages which all give the same error.</p>
  <p>On the other hand, this works fine:</p>
  <pre class="lang-js prettyprint-override"><code>const { ipfsFetch } = require(&quot;ipfs-fetch&quot;)
  
  const main = async () =&gt; {
      const res = await ipfsFetch(&quot;&lt;cid&gt;/1.json&quot;)
      console.log(res.toString())
  }
  
  main()
  </code></pre>
  <p>Which leads me to believe that the problem has to do with react. What am I doing wrong? Is there a better way to do this in react?</p>