How to create a Web worker as a module inside one of the theia extensions?

#1

Hi. I’m trying to add a web-worker.ts file as a module so that I can import the dependencies available inside the monorepo using the normal import syntax. But I’m only able to create web-worker.js that can import files using importScripts with the current tsconfig and webpack configurations. Does anybody have a solution to how I can create a Web worker as a module inside one of the theia extensions? Or as an alternate, is there any web worker frontend service/manager available that I can use? TIA.

#2

@najaarv The best approach would probably be to add a new webpack config to the webpack.config.js file in your project that bundles the web-worker.ts/js file with all its import into a single file web worker file. That way you can use the normal TypeScript/import syntax in your .ts files and still have a single web-worker.js file that you can consume in your frontend extension code.

#3

To add more context, I’m facing an error when creating the worker.ts file itself and consuming it from a frontend extension.

Module parse failed: ParserHelpers.addParsedVariableToModule is not a function
File was processed with these loaders:
 * ../node_modules/source-map-loader/dist/cjs.js
 * ../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
TypeError: ParserHelpers.addParsedVariableToModule is not a function

What config changes would you suggest to bundle these web-worker files separately? I tried using ts-loader and excluding the file from being parsed by source-map-loader, but it is not working so far.

#4

I tried using ts-loader and excluding the file from being parsed by source-map-loader, but it is not working so far.

We usually don’t use ts-loader but compile the .ts to .js and then use webpack to compile the final artifact.

Module parse failed: ParserHelpers.addParsedVariableToModule is not a function

I’m not familiar with this issue. ParserHelpers doesn’t seem to be anything we use in Theia.

What config changes would you suggest to bundle these web-worker files separately?

Note that I recommend against bundling them separately. Instead you should add a bundling step to webpack.config.js. Take a look at the generated gen-webpack.config.js to see how the Theia frontend is compiled. A webworker should use a very similar setup.