Has anyone tried workers with webpack 5/RW0.36.x?

Irev-Dev · September 6, 2021, 10:09am

I want to use use a web worker and the docs say that no loader is needed and make it look super simple but I haven’t had any luck. I’m guessing it’s webpack config but I’ve not managed to get anything working.

This question seems most similar to what I’m getting as using new URL(...) has an origin of file:// instead of http. and that leads to a error of Failed to construct 'Worker': Script at 'file:///Users/kurthutten/other/redwoodblog/app/web/src/helpers/cadPackages/jsCad/jscad-worker.worker.js'

But have also been reading through this, and even the minimal example isn’t working.

In the mean time it’s working by putting javascript in the public folder but that not a long term solution.

Irev-Dev · September 7, 2021, 9:34pm

I bit of follow up, I’m using the webpack 4 worker-loader to load the worker and it seems to be working fine.

github.com/Irev-Dev/cadhub

Move worker into webpack build

Irev-Dev:main ← Irev-Dev:kurt/494-move-worker-into-webpack-build

opened 08:32PM - 07 Sep 21 UTC

Irev-Dev

+718 -801

@hrgdavor This is the initial work to get the working into the build process, I …would like to keep working later on this. Like you said because this was proof of concept code that you had copied from previous work, it would be good to trim down dead code not relevant to this use case (e.g. canvas stuff). I removed some that I was confident but my goal atm was just to get it out of the public asset folder atm. As part of it being moved out of the public folder, suddenly the linter recognised the file as code it could format so this is a much better diff https://github.com/Irev-Dev/cadhub/commit/22da074965354fd7ec23e6b59473a06485832bd4 ------ The jscad worker code was hosted as a static asset, making it odd javascript where we have to be conscious of what javascript features we can use and if it will work on older browsers, plus it can't be typescript like the rest of the codebase. Since redwood 0.36 we using webpack 5 should make loading workers easy https://webpack.js.org/guides/web-workers/ But I had trouble with this (see: https://community.redwoodjs.com/t/has-anyone-tried-workers-with-webpack-5-rw0-36-x/2394) and instead used the webpack 4 loader without any issues This issue relates to #411 , and is a checklist item on #444 Resolves #494

Would still like to do it the webpack 5 way in future.

Tobbe · December 24, 2021, 10:48pm

I needed to use a web worker. And found this thread.

When I tried locally it just worked now with webpack 5. But when I tried to deploy I get this error

var worker = new Worker(new URL('./searchWorker.js', import.meta.url));
                                                            ^^^^
SyntaxError: Cannot use 'import.meta' outside a module
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)

Anyone know how to fix this error?

Tobbe · December 26, 2021, 9:05pm

I should have pasted the full error above, but I didn’t… If I had, you would have been able to see that the error was from the prerender phase.

So I worked around it by lazyloading the component with the worker, and then just not run the lazyloading code when prerendering, and instead load a component that looks the same, but that doesn’t have the logic.