[how-to] use workers with webpack

[echap]

I am trying to use a webworker within my project for background computation purposes.

here are my versions :

All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 3.1.2           │ 3.1.2          │ Up to date  │
│ tns-core-modules │ 3.1.0           │ 3.1.0          │ Up to date  │
│ tns-android      │ 3.1.1           │ 3.1.1          │ Up to date  │
│ tns-ios          │ 3.1.0           │ 3.1.0          │ Up to date  │

When I was using {N} 2.5.5, I had a system built like that :

• My application was using a webpack-compiler wrapper made by triniwiz
• I made a variable, globals.isAoT that I used to set in mymain.ts and main.aot.ts and checked in my worker instanciation
• At instanciation, it looked like that :

try {
            if(this.isAoT) {
                let WW = require("worker-loader!./voronoi.worker.js");
                this._mainWorker = new WW;
            } else {
                this._mainWorker =  new Worker("./voronoi.worker.js");
            }
        } catch(error) {
            console.log("VoronoiWorkerService::instanciateMainWorker() : ", error);
        }

And is was working well.

With {N} 3.1.1, I dropped usage of the globals variable, but all the rest is still the same but this is not working anymore.

The issue is :

Exception in thread "main" java.io.IOException: File already exists. This may lead to undesired behavior.
Please change the name of one of the extended classes.
File:/home/eric/my-project/platforms/android/src/main/java/com/tns/FragmentClass.java Class: com.tns.FragmentClass
        at org.nativescript.staticbindinggenerator.Generator.writeBindings(Generator.java:68)
        at org.nativescript.staticbindinggenerator.Main.main(Main.java:15)
:asbg:generateBindings FAILED

My question then is, how am I supposed to use my webworker with {N} 3.1.1 webpacked ? Thanks a lot !

[danielgek]

@echap the problem is already reported, take a look at these issues: #176 and #778

[echap]

@danielgek Yes I've been through those posts, but it's unclear if it is a bug or something else, and it seems to me untrackable for the next people who will try to find out how to use workers with webpack.

As of today, we can't send in production new version of our application for this very single reason :(

[echap]

I'd be glad if I could have any kind of workaround 🆘

[danielgek]

Currently i don't have any workaround for this and i think the team hasn't too(@Pip3r4o)

i actually have shipped the app i'm working on w/o AOT :(

[echap]

@danielgek sadely that's impossible for us to do so. I'll wait untill next week for our next release, hopping it will get back to work 🙏

[hypery2k]

I've read to all the issues and found this commit. If I know use "@ngtools/webpack": "1.6.0-beta.1" a got the following error:

ERROR in ../~/nativescript-dev-webpack/tns-aot-loader.js!../~/@ngtools/webpack/src!./workers/cleanup.db.worker.ts
    Module build failed: Error: @ngtools/webpack is being used as a loader but no `tsConfigPath` option nor AotPlugin was detected. You must provide at least one of these.
        at Object.ngcLoader (.../node_modules/@ngtools/webpack/src/loader.js:429:1

Seems related to these issues, here and here.

[danielgek]

@hypery2k is that for issue #139 ? xD

[echap]

Any update on this ?

[echap]

Still nothing on this ?

[petekanev]

@echap we are committed to addressing the problem in the 3.2 release. We'll let you know when it's fixed. There are no workarounds currently, except to avoid importing tns-core-modules, or plugins depending on these inside your worker script.

[triniwiz]

@Pip3r4o a work around for me can be found here https://github.com/TeamMaestro/nativescript-pspdfkit/blob/master/src/ios/pspdfkit.ts#L50-L56 after installing the modifed worker-loader in my repo

[echap]

@triniwiz Is this working only for ios ? (since your chances are here ?), Haven't tried it yet !

[triniwiz]

@echap it works for both platform

[sis0k0]

You can now use the nativescript worker-loader. You can find more info and demo apps in the repo of the plugin: https://github.com/nativescript/worker-loader. The plugin is also included in the default webpack configuration that the nativescript-dev-webpack plugin adds.