title: New RxJS subscription gets created during page hot module replacement
body: <p>I'm importing a newed up subject from an internal NPM package into my Next.js application.</p>
  
  <p>Internal NPM Package</p>
  
  <pre><code>import { Subject } from 'rxjs';
  
  export const errorSubject = new Subject&lt;{}&gt;();
  </code></pre>
  
  <p>Next.js App</p>
  
  <pre><code>import { errorSubject } from '@my-package'
  
  // Inside component's render
  render() {
    errorSubject.subscribe({
      next: v =&gt; console.log(v),
    });
  }
  </code></pre>
  
  <p>Everytime the Next.js hot-reloads, a new subscription is created. If I reload the pages, only 1 subscription remains.</p>
  
  <p>This is causing issues because multiple callbacks are ran.</p>
  
  <hr>
  
  <p><a href="https://www.youtube.com/watch?v=cqy3RPQocRw" rel="nofollow noreferrer">https://www.youtube.com/watch?v=cqy3RPQocRw</a></p>