Using Web Workers in CRA?

I am able to use worker-loader in a simple webpack bundled app to import web worker into my APP. But how to do the same thing in CRA, i also want the capability of importing other modules to my web worker to do those tasks inside web worker.

Thanks.

We are hoping to add support for Web Workers and worker-loader in react-scripts 2.0: #3934

@iansu

@iansu thanks for the reply, any way to do it if i am using an ejected setup? use the same changes of #3934 to config\webpack.config.*.js ??

We don't support ejected setups but that will most likely work. If not then check out the worker-loader docs.

i tried with whatever is provided in the worker-loader config
package.json

 "worker-loader": "^1.1.1"

webpack config

   {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' },
      },

App.js

import Worker from './worker';

const worker = new Worker();

worker.postMessage({msg: "hello"});

worker.js

self.addEventListener('message', event => {
  console.log('Web Worker called by PARENT THREAD...', event.data);
});

ERROR
TypeError: _Worker2.default is not a constructor

As I mentioned before, we can't provide support for ejected setups. There are too many unknowns and we have limited time to help. I'd suggest reading over the worker-loader docs and maybe trying to get this working in a fresh project first.

I'm going to close this now as work on this feature is already underway.

Ok. thanks for the information.. the above error was from a fresh project...

@iansu

@iansu one quick thing i noticed
in your PR #3934

 require.resolve('thread-loader'),

so when i eject CRA, in package.json i don't see this module. Is it needed to have your other changes work?

Yes, that module is required. You'll have to install it yourself since you've ejected.

@iansu

@iansu and as of now in non-ejected CRA there is no way we can use web workers apart from react-app-rewired as explained in https://medium.com/@danilog1905/how-to-use-web-workers-with-react-create-app-and-not-ejecting-in-the-attempt-3718d2a1166b

As per #1277 (comment) i don't see how we can ES6 import several modules which i want to process in the worker itself.

Yes, you can't currently use Web Workers in Create React App until #3934 is merged and released.

I'm not really sure what you mean about importing modules into the worker. The worker files are run through babel-loader just like all the other JS so you should be able to do all the same things, including importing modules.

@iansu

@iansu thanks for the reply, when is

We are hoping to add support for Web Workers and worker-loader in react-scripts 2.0: #3934

coming out. any expected timelines.

Navigation Menu

Repository navigation

Using Web Workers in CRA? #4505

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Using Web Workers in CRA? #4505

Description

Activity

iansu commented on May 23, 2018

subhranshudas commented on May 23, 2018

iansu commented on May 23, 2018

subhranshudas commented on May 23, 2018

iansu commented on May 23, 2018

subhranshudas commented on May 23, 2018

subhranshudas commented on May 23, 2018

iansu commented on May 23, 2018

subhranshudas commented on May 24, 2018

iansu commented on May 24, 2018

subhranshudas commented on May 30, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions