Add cross-origin worker support by piotr-oles · Pull Request #14680 · webpack/webpack

piotr-oles · 2021-11-08T19:09:18Z

Motivation
Hi! 👋 I would like to use the new worker import syntax:

const worker = new Worker(new URL('./worker', import.meta.url));

to share code between the main thread and the worker.

Unfortunately, the project I'm working on uses CDN on a separate domain, and I get a CORS error. I believe this is a common pattern, and I think it would be very nice if webpack would support cross-origin workers out of the box.

Related discussion: #14648

What kind of change does this PR introduce?
Feature

Did you add tests for your changes?
I added some tests, but I'm not sure if it's enough. It's a little bit hard to test because the issue is browser-specific and I don't know if it's possible to reproduce on nodejs.

Does this PR introduce a breaking change?
No

What needs to be documented once your changes are merged?
We have to add documentation for the new workerCrossOriginLoading output option and crossOriginLoading entry option (as advanced - not recommended to change).

webpack-bot · 2021-11-08T19:09:24Z

For maintainers only:

This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
This needs to be backported to webpack 4 (issue will be created when merged)

linux-foundation-easycla · 2021-11-08T19:09:30Z

The committers are authorized under a signed CLA.

✅ Piotr Oleś (d0a9fb2, 8333a03, 0de56be, f88013b, 6ce1783, 5ea5ef7, bbdc681)

lib/RuntimePlugin.js

lib/dependencies/WorkerDependency.js

webpack-bot · 2021-11-09T09:51:11Z

Thank you for your pull request! The most important CI builds succeeded, we’ll review the pull request soon.

alexander-akait · 2021-11-09T11:28:48Z

lib/dependencies/WorkerDependency.js

+
+			const baseUriTemplate = `JSON.stringify(${RuntimeGlobals.scriptUrl})`;
+			const scriptUrlTemplate = `JSON.stringify(new URL(${workerUrlTemplate}, ${RuntimeGlobals.scriptUrl}))`;
+			const crossOriginLoaderTemplate = `"__webpack_base_uri__=" + ${baseUriTemplate} + ";importScripts(" + ${scriptUrlTemplate} + ");"`;


Bad idea to use importScripts, also it should respect ESM output

Good point, I will create test cases for esm output and update the code :)

I added support for ESM modules and tested it manually. Unfortunately, I wasn't able to make automatic tests to work with ESM (and I didn't found any ESM tests with workers) :/

piotr-oles · 2021-11-29T20:45:57Z

could someone take a look? :)

CraigglesO · 2021-12-06T22:00:19Z

I'd love to see this pass through so I can have a more flexible/cleaner build & code setup.
@alexander-akait - are you available?

alexander-akait · 2021-12-07T11:25:09Z

lib/runtime/CreateScriptBlobRuntimeModule.js

+			])}`
+		]);
+	}
+}


Not sure it is good solution

Could you elaborate?
Is it bad because of the runtime implementation?
Are you concerned about browser support?
Or is it bad because of how it interact with webpack architecture?

Firstly, we need to add blob support to https://github.com/webpack/webpack/blob/main/lib/config/target.js#L81, we don't need to generate extra runtime if developer provide versions.

I think we need to look at this solution a little differently, blob loading can be added not only for workers, any file can be loaded using blob, yes it is most often applicable to workers, but if we need to add blob support we need to add them to any types - js/web wokrers/asset modules and provide option to this.

crossOriginLoading is some misleading, you apply several techniques that can be applied to other things to solve the cross origin problem. For example you can apply base64 here too.

I see what you want to solve and what problem you are experiencing, but I think we should think it over in more detail

We already support asset/raw, so we can have asset/blob and refactor runtime to allow using it on javascript files, so you can loaded bundled file as raw text or as blob (just idea)

Hmm... That's interesting, I agree that we should try to generalise the use-case.
On the other hand, we don't load the file using Blob - we only use it to create importScripts(filePath) code (and the file itself is loaded later by the runtime).
So this wouldn't work with other file types. Do you suggest adding asset/blob and then emitting the "importScripts(filePath)" file and importing it using asset/blob?

In some sense it's already possible - I do this here (it could be extracted to a plugin).

@sokra What do you think about this?

@sokra bump.

My team is desperate for this to be merged. We need cross-origin workers, and worker-loader is causing all kinds of problems. Is there any way that generalizing custom public paths can be deferred until after this feature is merged? If I can assist in development or testing in any way, I am happy to offer my attention and energy.

@AprilArcus
You can use a shim in the meantime that @piotr-oles created here

Works great for me. Although, I'm in the same boat because I want to have 2 separate builds for varying purposes.
Would be happy to add support where I can. @alexander-akait - is there anyone else that could take a look?

piotr-oles · 2022-07-15T07:57:20Z

I don't think it's going to be merged so I'm closing the PR :)

gigadie · 2023-12-04T17:59:55Z

and this issue still is present nowadays unfortunately

webpack-bot added the PR: unreviewed label Nov 8, 2021

piotr-oles commented Nov 8, 2021

View reviewed changes

lib/RuntimePlugin.js Outdated Show resolved Hide resolved

piotr-oles commented Nov 8, 2021

View reviewed changes

lib/dependencies/WorkerDependency.js Outdated Show resolved Hide resolved

webpack-bot added the PR: CI-not-ok label Nov 8, 2021

piotr-oles marked this pull request as draft November 8, 2021 20:16

webpack-bot added PR: CI-ok and removed PR: CI-not-ok labels Nov 9, 2021

piotr-oles marked this pull request as ready for review November 9, 2021 10:15

alexander-akait reviewed Nov 9, 2021

View reviewed changes

piotr-oles and others added 10 commits November 12, 2021 23:20

Add tests cases for cross-origin web workers

db57dc3

Add workerCrossOriginLoading option to webpack config

2a78b9f

Add support for cross-origin workers

b3b628c

Update createFakeWorker to be compatible with dynamic public path

8be1090

Add missing description to workerCrossOriginLoading option

076d758

Fix types issues

cdc3b82

Update snapshots

0323ffc

Refactor cross-origin support implementation

a7eacc9

Update snapshots

30918be

Add support for ES Modules for cross origin workers

20d56b1

piotr-oles force-pushed the feature/add-worker-cross-origin-loading-option branch from 2e2998e to 20d56b1 Compare November 12, 2021 22:26

piotr-oles requested a review from alexander-akait November 13, 2021 09:38

webpack-bot added the PR: conflict label Nov 15, 2021

alexander-akait reviewed Dec 7, 2021

View reviewed changes

piotr-oles closed this Jul 15, 2022

thomastay mentioned this pull request Jan 25, 2023

Add a new output option, workerPublicPath #16671

Merged

Uh oh!

Conversation

piotr-oles commented Nov 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webpack-bot commented Nov 8, 2021

Uh oh!

linux-foundation-easycla bot commented Nov 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

webpack-bot commented Nov 9, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

piotr-oles commented Nov 29, 2021

Uh oh!

CraigglesO commented Dec 6, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexander-akait Dec 7, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

piotr-oles commented Jul 15, 2022

Uh oh!

gigadie commented Dec 4, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

piotr-oles commented Nov 8, 2021 •

edited

Loading

linux-foundation-easycla bot commented Nov 8, 2021 •

edited

Loading

alexander-akait Dec 7, 2021 •

edited

Loading