Uncaught (in promise) DOMException: LockManager.request: request() is not allowed in this context

[Kreijstal]

In Firefox, see https://observablehq.com/@a10k/hello-lightning-fs-isomorphic-git
Works perfectly in chrome but when creating the new filesystem, DOM refuses.

[jcubic]

promises functions as the name suggest are async, you can't execute a stat on the next line without await in front.

[jcubic]

Check this demo https://codepen.io/jcubic/pen/zYLdPxK?editors=0011 and you should not use @beta version.

[jcubic]

If you can create a demo that will clean after itself it would be great.

[jcubic]

The error itself looks like a problem with observablehq, if you can please create a self-contained code without any extra middleman.

[jcubic]

Also if error came from lightning-fs when creating FS please try to minimize the usage of libraries and Use only things to make reproducing the error possible. You don't even use isomorphic-git properly because there is no "master" branch in git repo.

[Kreijstal]

Yeah, didn't give you a minimal example, sorry about that.

This however works in chrome/edge. So it can't be a problem with observablehq.
You can remove the rest of the code, it doesn't matter, the code errors as soon as you use new FS("something")
When I have time I'll create a minimal working example outside observable.
Observable will always await for thenables automatically between cells

[Kreijstal]

Check this demo https://codepen.io/jcubic/pen/zYLdPxK?editors=0011 and you should not use @beta version.

oh wow, your example breaks on my machine, same error

[Kreijstal]

without plugins

on firefox 108.0.2 windows 10.

[Kreijstal]

ok, managed to somehow reproduce it.
This is based on

lightning-fs/src/Mutex2.js

Line 31 in b041900

navigator.locks.request(this._database + "_lock", {signal: controller.signal}, lock => {

new Promise((resolve, reject) => {
      const controller = new AbortController();
      setTimeout(() => {
        controller.abort();
        reject(new Error("Mutex timeout"));
      }, 3);
      navigator.locks.request(this._database + "_lock", {signal: controller.signal}, (lock) => {
        this._has = !!lock;
        resolve(!!lock);
        return new Promise((resolve2) => {
          console.log('aaa');
window.helpme=resolve2;
        });
      });
    });

firefox:

chrome:

[jcubic]

But it works when I use the same code outside of CodePen.

This is my own playground that I work on and it works fine there:

https://p5.javascript.org.pl/motionless-age?template=none&base=base.js

[Kreijstal]

Yes! It works on your playground.., to my amazement.

It doesn't work on codepen, or observable. Interesting... It works in chrome tho. This is interesting. Maybe it's the eval context?
I tried just using that snipped of code on codepen and your playground, breaks in codepen, works on your playground.

[jcubic]

I suspect that this may be something with Sandboxing, I don't use any protection on my playground. Maybe I will add some kind of Sandboxing later in the process. My application is a prototype.

Anyway, I contacted CodeSanbox support maybe they will know what is happening. If a lock can't be used in the Sandboxed environment then the library should protect against it, maybe disabling the lock, use something else, throwing a proper error, or maybe showing a warning.

[jcubic]

Another explanation is that this is a bug in Firefox. I don't see any information about Sandbox on MDN.

[jcubic]

I've contacted CodePen support they can reproduce the issue but don't have a solution. I will try to recreate the issue on sandboxed iframe.

[Kreijstal]

https://bugzilla.mozilla.org/show_bug.cgi?id=1798493 hmm, can we maybe detect this case and downgrade or at least give a meaningful error message