can not get BlobWorker.fromText working (Webpack)

[jasonswearingen]

I'm trying to follow the instructions to get blobs working.

Iusing the raw-loader appears to work, but I keep getting syntax errors like:

//line 1 of test.worker-thread.js
import { expose } from "threads/worker";
^^^^^^^^^^^^^^^^^
> Error: Uncaught SyntaxError: Cannot use import statement outside a module (blob:http://localhost:8080/b583c876-110f-49cf-bfff-2b92254c93bc:1)

If I don't use blobs, everything works fine.

What I want to do is have the worker bundled in the webpack browser bundle. If there's an easier way to do that, please let me know.

If not, is there some example showing how to use the BlogWorker?

here is the related parts of my code. In Typescript, for an isomorphic library. FYI I am only using webpack to bundle an esm transpiled version of my code for browser. For node it runs the normal commonjs transpiled ts output.

//_main.ts

import * as testWorker from "./_internal/test.thread-worker"
import { spawn, Thread, Worker, BlobWorker } from "threads"

async function threadTest(): Promise<void> {
	const counter = await ( async () => {
		if ( environment.getEnvInfo().platform === "browser" ) {
			const testWorkerBlob = require( "raw-loader!./_internal/test.thread-worker" )
			return await spawn<testWorker.Counter>( BlobWorker.fromText( testWorkerBlob.default ) ) 
		} else {
			return await spawn<testWorker.Counter>( new Worker( "./_internal/test.thread-worker" ) )
		}

	} )()

	const initialCount = await counter.getCount()
	await counter.increment()
	const update1Count = await counter.getCount()
	void counter.increment()
	const update2Count = await counter.getCount()
	await Thread.terminate( counter )

	console.log( `threads!  noice!!!?!!  ${ JSON.stringify( { initialCount, update1Count, update2Count } ) }` )
}

void threadTest()
console.error( "called threadTest " )

and the worker:

//test.thread-worker.ts
import { expose } from "threads/worker"

let currentCount = 0

const counter = {
	getCount() {
		return currentCount
	},
	increment() {
		return ++currentCount
	},
	decrement() {
		return --currentCount
	}
}
console.warn( "finished loading worker" )

export type Counter = typeof counter
expose( counter )

the full source code is available here: https://github.com/Novaleaf/xlib/blob/threadjs-blob-test/libraries/xlib/src/_main.ts

[andywer]

Hey Jason!

I agree, the documentation of blob workers is not great.

Look at the short example in the docs, though (https://threads.js.org/usage#blob-workers):

Here is a webpack-based example, leveraging the raw-loader to inline the worker code. The worker code that we load using the raw-loader is the content of bundles that have been created by two previous webpack runs: one worker build targetting node.js, one for web browsers.

The idea is to run webpack once to bundle your worker, then run webpack once more to bundle the actual app, while the worker is spawned from the worker bundle (created by the first webpack run) using the raw-loader and a blob worker.

You load the worker's source code using the raw-loader, that's why you see the error. You need to build the worker before you build the app, so you can load the worker bundle using raw-loader.

Ideally you shouldn't have to run webpack twice, but you would have a special webpack loader that transparently builds the worker and imports the resulting bundle. For now you will have to do the double-webpack build, though.

[jasonswearingen]

okay thank you. I think in my case it means give up on the single file option.