Support for web worker without ejecting

[j-lee8]

Hi all.

We have created a CRA app and have persisted two versions: an ejected version and a non-ejected.
Is it possible to support a web worker (runs every minute or so to check whether there has been a double login and subsequently force the logout of the first login) in a non-ejected app? We are dispatching the requests using Redux and in a previous version (using Webpack 3) it all worked fine but now we are getting a worker.postMessage is not a function error (we ejected and added the worker-loader plugin and the global: 'this' property in the Webpack output but no dice). We can get it working by reverting to an old version (using Webpack 3) but it houses a lot of dated dependencies and isn't PWA.

Basically is it possible to get this working without ejecting? This is proving to be a real pain point and Webpack isn't exactly the most intuitive tool.

Thanks all - I really appreciate it :)

[dschu-lab]

Possible duplicate of #5886

[mrmckeb]

Hi @JavaJamie, I agree with @dschu-lab. Do you think that will solve your issue? That PR looks like it's still needing some work, but hopefully will merge soon.

[j-lee8]

Hi @mrmckeb, thank you for your response. We have tried everything but to no avail. There were also issues using "self" (unrestricted globals issue) so we created an .eslintrc file to override this.

After further debugging it transpired that the postMessage function wasn't being called on the worker (or the worker was created but the scope was wrong) so instead of using a singleton to generate the worker (this may have been the problem) I just created a new Worker('logout.worker') directly and that was able to access the postMessage function. There are still some issues but at least the Redux action is being dispatched onmessage now.

Ideally it would be great to use the web worker without ejecting (as we faced a significant number of issues with Babel, decorators etc after ejecting).

Thanks.

[miraage]

AFAIK you can run npm i worker-loader and load workers in your code via worker-loader?some=options&another=one!./path/to/your.worker.js unless there is a configuration to disable inline loaders.

[j-lee8]

We tampered further with the configuration and managed to get it working in the end with the unejected app so we're incredibly happy. We opted to go down the route of using react-app-rewired and worker-loader as devDependencies and inside the worker file we disabled the lint checking using /* eslint-disable */

It seems to work flawlessly now as it did in our old version (using Webpack 3).

[xiaoshuai]

@JavaJamie
now we can use babel decorators without ejecting
by edit file create.js in node_modules/babel-preset-react-app package
find those code in file

// Turn on legacy decorators for TypeScript files
isTypeScriptEnabled && [
require('@babel/plugin-proposal-decorators').default,
false,
],

change to

// Turn on legacy decorators for TypeScript files & JavaScript files
[
require('@babel/plugin-proposal-decorators').default,
{ legacy: true },
],

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.