title: Using Shared Worker in React
body: <p>I have a backend app that constantly serves events to my React app via Web Sockets. When a specific event is received a new browser tab should be opened. 
  The application will be run by a user in multiple tabs, so I need to open a new tab only once and prevent it from being opened by all running instances.</p>
  
  <p>I've tried using Redux persistent storage, but it doesn't seem to correspond my needs. The best solution that I've found is Shared Workers.</p>
  
  <p>I've tried using Shared Worker in my React app, but I can't set up it properly. It's either being imported incorrectly or Webpack is unable to load it 
  <code>Uncaught SyntaxError: Unexpected token &lt;</code></p>
  
  <p>When I googled I haven't found any examples of using Shared Worker in React app (with or without CRA) and at this point, I'm not even sure it's possible. I did found some Web Workers examples, but they have totally different configs. </p>
  
  <p>Can anyone please share some specifics of running Shared Worker in React? Or any other ideas that can provide me with similar functionality will be also greatly appreciated.</p>
  
  <p>Edit: Adding lastest code of what I've tried. Disregard the counter logic, consider just the setup:</p>
  
  <p><strong>worker.js</strong></p>
  
  <pre><code>import React from 'react';
  
  export const startCounter = () =&gt; {
    window.self.addEventListener("message", event =&gt; {
      console.log(event.data, self);
      let initial = event.data;
      setInterval(() =&gt; this.postMessage(initial++), 1000);}); 
  }
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {startCounter} from './worker';
  
  class App extends Component {
  
    componentDidMount() {
      const worker = new SharedWorker(startCounter);
      worker.port.start()
      // worker.postMessage(this.state.counter);
      // worker.addEventListener('message', event =&gt; this.setState({counter: event.data}));
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>