CSS paint worklet (Houdini) causes generic error

[Heydon]

🐛 bug report

Houdini paint worklet causes cryptic Uncaught (in promise) DOMException: The user aborted a request. error

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

package.json

{
  "name": "bruck",
  "version": "0.0.1",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build index.html --out-dir docs"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Heydon/bruck.git"
  },
  "author": "Heydon Pickering <heydon@heydonworks.com> (http://www.heydonworks.com)",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Heydon/bruck/issues"
  },
  "homepage": "https://github.com/Heydon/bruck#readme",
  "dependencies": {
    "components": "^0.1.0",
    "lib": "^3.0.2",
    "parcel-bundler": "^1.10.1"
  }
}

Babel

Just using the default config

🤔 Expected Behavior

My CSS paintWorklet should be loaded and applied in my app.js file (see below).

/* Register paint workers */
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('js/houdini/image-cross.js');
}

😯 Current Behavior

Note the error points to the index.html file:

💁 Possible Solution

Removing the worker/Houdini stopped the error, but obviously that's not ideal ;-) that's just how I know it was the provided code that triggered it (under Expected behavior)

🔦 Context

My code depends on paint workers in places. It's an experimental app but I was hoping Parcel could help with bundling.

💻 Code Sample

/* Register paint workers */
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('js/houdini/image-cross.js');
}

(Note that the worklet path should point from the root, not the JS file (app.js) in this case. I tried using the ~ syntax, but that didn't help.)

🌍 Your Environment

Software	Version(s)
Parcel	1.10.1
Node	9.8.0
npm/Yarn	6.4.1
Operating System	macOS Sierra

[HannahTa]

Inside you're paintWorklet, how have you declared inputProperties?

For myself, the error appears when inputProperties has been declared like this:

static inputProperties = ['--color'];

Changing inputProperties to the following removes the error.

  static get inputProperties() {
  return ['--color'];
}

Hope this helps!

[Heydon]

@HannahTa Hi! Thanks for taking a look. I already use that method :-(

Here's how my whole file looks:

class CrossPainter {
  static get inputProperties() {
    return ['--border-thin', '--color-dark'];
  }

  paint(ctx, size, props) {
    ctx.lineWidth = props.get('--border-thin').value;
    ctx.strokeStyle = props.get('--color-dark').toString();
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(size.width, size.height);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(size.width, 0);
    ctx.lineTo(0, size.height);
    ctx.stroke();
  }
}

registerPaint('image-cross', CrossPainter);

[benji6]

I'm encountering this same issue. When the browser attempts to fetch the worklet script the parcel development server is responding with the index.html file. Also when I run parcel build the paint worklet seems to be missed in the output directory.

I am using a paint worklet in the same project as a service worker and parcel is handling the service worker absolutely fine but failing to handle the paint worklet.

In case it's useful information I'm using a fairly standard TypeScript setup in my project and here's my environment:

Software	Version(s)
Parcel	1.12.3
Node	10.16.3
Yarn	1.19.1
Operating System	macOS Catalina

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[shaibam]

I can't believe I'm saying this but inlining it worked for me:
https://stackoverflow.com/questions/55503925/can-the-paintworklet-be-inlined