Doesn't work in Web Worker: Error: Illegal invocation

[mischnic]

It was already noted that running in the browser isn't officially supported (#25), but maybe someone can give me hints on how to debug this (very hard without sourcemaps for the Dart code).

Error: Error: Illegal invocation
    at Object.AU (http://localhost:5000/ParcelWorker.cc8dae65.js:536605:15)
    at w6.$2 (http://localhost:5000/ParcelWorker.cc8dae65.js:556087:53)
    at u6.v7 (http://localhost:5000/ParcelWorker.cc8dae65.js:543941:33)
    at u6.v6 (http://localhost:5000/ParcelWorker.cc8dae65.js:543945:19)
    at ik.uh (http://localhost:5000/ParcelWorker.cc8dae65.js:542621:20)
    at tF.$0 (http://localhost:5000/ParcelWorker.cc8dae65.js:542922:19)
    at Object.ex (http://localhost:5000/ParcelWorker.cc8dae65.js:529758:55)
    at aj.bb (http://localhost:5000/ParcelWorker.cc8dae65.js:542753:9)
    at iz.bb (http://localhost:5000/ParcelWorker.cc8dae65.js:542606:14)
    at iz.cA (http://localhost:5000/ParcelWorker.cc8dae65.js:542577:12)

[mischnic]

This is happens when any importer is added. Executing this code on the main thread (using just require) works fine.

Reproduction: https://github.com/mischnic/sass-worker-importer (error in console)

/*  index.js */

// this works
require("./worker.js");

// this doesn't
const worker = new Worker("./worker.js");
worker.onerror = console.error;

/*  worker.js */
self.Buffer = require("buffer").Buffer;

const sass = require("sass");

const data = `$colorRed: red;
#header {
  color: $colorRed;
}`;

function run() {
	return sass.renderSync({
		data,
		importer: [
			(url, prev, done) => {
				return { file: url };
			}
		]
	});
}

console.log(run().css.toString("utf8"));

[nex3]

This is a great question for the Sass StackOverflow community! We try to keep this issue tracker focused on bugs and feature requests that need the core team's attention in particular, while requests for support are usually better handled by the community at large.

[mischnic]

For future reference (mostly so I can find it later myself):
https://stackoverflow.com/questions/55111011/dart-sass-in-web-worker-error-illegal-invocation

[kkirby]

@mischnic @nex3

This is actually an issue. The illegal invocation occurs inside Primitives_currentUri:

Primitives_currentUri: function Primitives_currentUri() {
	if (!!self.location) return self.location.href;
	return;
},

When we call self.location we are getting the value of location on a copied object of window, which occurs here:

var dartNodePreambleSelf = typeof global !== "undefined" ? global : window;

var self = Object.create(dartNodePreambleSelf);

So the actual value of self is not the same as window, which means the value of location can't be retrieved since it's only valid on window, causing an illegal invocation error.

I'm not sure what the purpose of creating a new object from window is, however, doing a direct assignment works fine:

var dartNodePreambleSelf = typeof global !== "undefined" ? global : window;

var self = dartNodePreambleSelf;

Although, now I'm getting errors about self.Buffer not being assigned (which makes sense, Buffer isn't part of the DOM), though I'm not too worried about that right now.

Unless I'm missing something, I vote to re-open this issue. (I'm missing something)

Thanks

[mischnic]

Yes, that all correct. But that prelude is inserted by the dart compiler which in turn includes it from another package. This is the correct issue for this: mbullington/node_preamble.dart#14

[kkirby]

@mischnic I was just going to edit my post to say:

I understand that this may not be an issue with sass itself, but possibly part of Dart. I'm just not sure where that specific code originates.

Thanks!