How to use Web Workers in create-react-app with worker-loader?

Question

I am trying to implement Web Workers in my React app to share a single WebSockets connection over multiple tabs. I use the worker-loader dependency for loading in Web Workers.

Unfortunately i can't even get a simple dedicated web worker to work.

App.jsx:

import React, { Component } from 'react';

// eslint-disable-next-line
import myWorker from 'worker-loader!./worker.js';

class App extends Component {
  constructor(props) {
    super();

    this.state = {};
  }

componentWillMount() {
    if(window.SharedWorker) {
      console.log(myWorker);
      myWorker.port.postMessage('Hello worker');

      myWorker.port.onmessage = function(e) {
        console.log('Message received from worker');
        console.log(e.data);
      }
    }

worker.js:

onconnect = function(e) {
  var port = e.ports[0];

  port.onmessage = function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
}

When loading the page the following webpack error appears:

I can't use the config style usage of worker-loader because that requires some changes in the webpack config. This config can't be edited because of create-react-app. I could if i eject create-react-app, but that does have some disadvantages.

Why doesn't it work? Somebody any ideas?

Thanks in advance,

Mike

Looks like you still need to create a new instance of the worker: new myWorker() — KevBot
– KevBot, Commented Jun 9, 2018 at 21:33
That was it! Thank you! After a lot of trying I totally missed this. I now however get the error: myWorker.port is undefined. Do you know why this error is thrown? Thanks in advance! — Maikkeyy
– Maikkeyy, Commented Jun 9, 2018 at 22:08

Maikkeyy · Accepted Answer · 2018-06-09 21:57:39Z

2

As @KevBot indicated i had to create a new instance of the Worker:

// eslint-disable-next-line
import Worker from 'worker-loader!./worker.js';

let myWorker = new Worker();

answered Jun 9, 2018 at 21:57

Maikkeyy

1,0471 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Web Workers in create-react-app with worker-loader?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related