martok/palefill

Rendering problem (blank part)

Artist-on-line opened this issue · 4 comments

Artist-on-line commented

My browser: Basilisk (https://www.basilisk-browser.org/) on Windows 10 Pro 22h2

This particular rendering problem happens with other sites too, the one cited is just an easy example:

  1. Go to https://stablediffusionweb.com/#demo

  2. You will see a blank (unrendered) part where there should be this: https://zupimages.net/up/22/48/weyp.png

Vangelis66 commented

First, 3 ReactJS-related errors appear inside WebConsole:

https://reactjs.org/docs/error-decoder.html?invariant=418,
https://reactjs.org/docs/error-decoder.html?invariant=423,
https://reactjs.org/docs/error-decoder.html?invariant=425

i.e.

Hydration failed because the initial UI does not match what was rendered on the server.

There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Text content does not match server-rendered HTML.

Finally, the real deal-breaker:

SyntaxError: expected expression, got keyword 'import'

... and that is because UXP does not currently support dynamic imports:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

(first implemented in Fx67); see UXP #1691, which is not seeing appreciable activity...

  • 👍1
Artist-on-line commented

@Vangelis66 Thank you for rephrasing and surrounding the problem in much precise technical terms, sorry for not being tech-savvy, I hope the dev will be able to do something about it, as it happens with a lot of (complex) websites.

  • 👍1
Vangelis66 commented

sorry for not being tech-savvy

No need to apologise for anything 😄 ; I'm not a javascript coder myself, just a mere user of a browser built on (a) UXP (fork), just like the official Basilisk app you're using...
UXP (the platform) is riddled with many deficiencies currently when it faces the modern web (which is Chromium-centric); over the last year(s) I've learned to use the browser's DevTools to recognise the errors these deficiencies generate and can easily (most of the time) tell why pages fail to load as expected 😜 ; this doesn't make me tech-savvy 😭 ...

The "proper way" to deal with these "Web Compatibility" issues is to fix them directly in the platform's code, but platform-inherent and dev-team related issues are stalling this process 😞 ...

Palefill is just a stopgap, a "palliative treatment" if you will, with finite capabilities, considering it's a one-person-project...

I can't say whether the problem you're facing can be mitigated inside palefill, my point is that UXP users shouldn't think of the extension as a panacea for their browser's ailments...

Kind regards 😄

  • ❤️1
martok commented

over the last year(s) I've learned to use the browser's DevTools to recognise the errors these deficiencies generate and can easily (most of the time) tell why pages fail to load as expected stuck_out_tongue_winking_eye ; this doesn't make me tech-savvy sob ...

But it does make you an evil criminal hacker, according to some highly qualified people 🤣

Palefill is just a stopgap, a "palliative treatment" if you will, with finite capabilities, considering it's a one-person-project...

With said person using about 30% Edge at home and 98% Firefox at work. So there's that...

I can't say whether the problem you're facing can be mitigated inside palefill

The main issue here is that a compiled React app really isn't supposed to be read by humans (to the point that they actively collect errors and turn them into telemetry instead of printing something even remotely useful), so there is very little that can be done without excessive work to "fix-up the code", as Palefill usually does. React just expects a reasonably consensus-following environment and goes for it...
Same reason why we have problems with Discord (#58). And Whatsapp, although that also falls over missing WebCrypto bits.

I'm going to use the "cant fix" label for these issues... maybe someone can, but I can't.

  • 😄1