Using Web Workers in CRA?

[subhranshudas]

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.

[iansu]

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

[subhranshudas]

@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 ??

[iansu]

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

[subhranshudas]

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

[iansu]

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.

[subhranshudas]

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

[subhranshudas]

@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?

[iansu]

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

[subhranshudas]

@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.

[iansu]

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.

[subhranshudas]

@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.