Code splitting Web Workers is a problem when the Worker is loaded from a different domain. #9687

stevexbritton · 2024-05-02T10:18:07Z

🐛 bug report

When a Web Worker needs to be loaded from another domain Parcel dynamically generates a blob Javascript file (eg blob:https://192.168.0.20:3001/86fd3485-c662-4b90-8ea9-b1b439693cef
) containing the following code to load that script.

importScripts("https://192.168.0.20:1234/2.0.1alpha/dummy.8e5470d9.js");

Parcel can code split the Worker code into shared bundles and then try to load those bundles with code like below.

importScripts("./dummy2.08cc0e8f.js")

This fails because it's a local url. Parcel has failed to add the domain and root path to the importsScripts url. Manually adding the domain and root path, see below, fixes the problem.

importScripts("https://192.168.0.20:1234/2.0.1alpha/dummy2.08cc0e8f.js")

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "",
  "version": "2.0.1alpha",
  "description": "",
  "homepage": "",
  "private": true,
  "source": "test/playpen.html",
  "type": "module",
  "scripts": {
  },
  "author": "",
  "license": "ISC",
  "browserslist": [
    "defaults"
  ],
  "staticFiles": {
    "staticPath": "./node_modules/three/examples/jsm/libs/draco",
    "excludeGlob": [
      "**/!(*.wasm)"
    ]
  },
  "dependencies": {
    "docs-ts": "^0.7.2",
    "fp-ts": "^2.16.1",
    "lit": "^3.1.2",
    "qrcode": "^1.5.1",
    "three": "~0.158.0"
  },
  "devDependencies": {
    "@parcel/transformer-typescript-tsc": "^2.12.0",
    "@parcel/validator-typescript": "^2.12.0",
    "@types/node": "^18.11.18",
    "@types/qrcode": "^1.5.0",
    "@types/three": "~0.158.0",
    "buffer": "^6.0.3",
    "genversion": "^3.1.1",
    "parcel": "^2.12.0",
    "parcel-reporter-static-files-copy": "^1.5.3",
    "process": "^0.11.10",
    "replace-in-file": "^6.3.5",
    "rimraf": "^3.0.2",
    "typescript": "^5.1.0"
  },
  "alias": {
    "buffer": "./node_modules/buffer",
    "fp-ts": "./node_modules/fp-ts",
    "three": "./node_modules/three"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",

    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "ES2022",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noEmit": true,
    "sourceMap": false,
    "declaration": true,
    "alwaysStrict": true,
    "noImplicitReturns": true,
    "noUnusedLocals": false, // SB TODO true,
    "noUnusedParameters": false, // SB TODO true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "stripInternal": true,
    "allowJs": false,
    "isolatedModules": true,
    "experimentalDecorators": true,
    "useDefineForClassFields": false
  },
  "include": [
    "./src",
    "./test",
    "./examples"
  ]
}

🤔 Expected Behavior

Because the worker is loaded from a different domain it cannot be split into shared bundles.

😯 Current Behavior

When the worker tries to load the shared code bundle the browser reports "44b8fa89-d9be-4e3e-8893-33b5506832b9:1 Uncaught DOMException: Failed to execute 'importScripts' on ..."

💁 Possible Solution

Some way of telling Parcel not to code split Worker code or certain files. This can be achieved in a crude way by configuring the @parcel/bundler-default minBundles and minBundleSize parameters, but is only good to prove that it is the code splitting of the Worker code that is causing the problem.

🔦 Context

I have a Custom HTML Element that can use dedicated workers to improve performance. Parcel is splitting the worker code into shared modules which is fine if the hosting HTML page and the custom HTML script are loaded from the same domain, but not if the HTML page is loaded from a different domain.

I'm currently avoiding the problem by not using workers.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" type="image/png" href="../assets/images/favicon.png">

    <script type="module" src="https://192.168.0.20:1234/custom-html-script.js"></script>

💻 Code Sample

I haven't produced a code sample yet, that might be quite difficult, but I'm hoping to get some feedback first. If you accept this as a bug with Parcel then I can probably look into producing an example, if necessary.

🌍 Your Environment

Software	Version(s)
Parcel	2.12.0
Node	18.14.2
npm/Yarn	9.5.0
Operating System	Mac OS 14.3.1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code splitting Web Workers is a problem when the Worker is loaded from a different domain. #9687

Code splitting Web Workers is a problem when the Worker is loaded from a different domain. #9687

stevexbritton commented May 2, 2024

Code splitting Web Workers is a problem when the Worker is loaded from a different domain. #9687

Code splitting Web Workers is a problem when the Worker is loaded from a different domain. #9687

Comments

stevexbritton commented May 2, 2024

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment