EAF browser fails to load org-roam-ui generated localhost page

[taquangtrung]

Describe the bug

EAF browser seems to hang when it tries to play a YouTube video. The webpage keeps flashing and couldn't play the video.

To Reproduce

• Type M-x eaf-open-browser and then youtube.com.
• Click to play the first video appears in YouTube.
• Then the browser keeps flashing and cannot load the video.

(I captured this the behavior in the attached screenshot)

Expected behavior

EAF browser should be able to play video on YouTube

Versions (please complete the following info):

• Distro and DE/WM: Linux Mint 20.2
• Versions of Dependencies: eaf-20210815.1417.
• M-x emacs-version: Emacs 27.2, Spacemacs distribution.

Error logs

Errors reported in the *eaf* buffer:

js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name
js: Uncaught (in promise) SyntaxError: Failed to execute 'whenDefined' on 'CustomElementRegistry': "style" is not a valid custom element name

Screenshots

[MatthewZMD]

I am not able to reproduce this issue.

[taquangtrung]

Thank you for the update!

I pull the newest code of eaf-browser (commit https://github.com/emacs-eaf/eaf-browser/commit/ca12e129fef67e4163e2f663278ad97d8d1e6a51), see that it indeed can play YouTube now.

Earlier, I tested with the older revision (commit https://github.com/emacs-eaf/eaf-browser/commit/629998c358fb3a59cb43e23e34d2567694e5e76e).

Maybe the new code has resolved this problem!

[MatthewZMD]

Awesome, glad it worked for you. Enjoy! 😄

[taquangtrung]

Thank you for the great EAF framework!

I also encountered a similar issue that eaf-browser cannot load a local webpage produced by org-roam-ui, not sure if I should open a new issue?

I just tested the newest eaf-browser but it seems that the problem with org-roam-ui still occurs. I tried to run eaf-open-browser with http://localhost:35901 but always obtain this error:

js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function
js: TypeError: Object.fromEntries is not a function

Here is the attached screenshot:

[MatthewZMD]

Are you able to open this page in a regular browser?

[taquangtrung]

Yes, I can open it normally in Google Chrome.

[MatthewZMD]

If you open it in Google Chrome, press F12 and refresh, do you see the same errors?

[taquangtrung]

No, Google Chrome can open the locahost webservice http://localhost:35901 perfectly. I pull the newest EAF code and the error still occurs.

Here is the screenshot of Google Chrome:

[MatthewZMD]

Click on Console button in the devtools.

[taquangtrung]

Oh, there are several errors, but Chrome can still load the webpage:

[13thptr]

Same issue here with (doom) Emacs 28.05 on WSL. Org-roam-ui opens fine in Firefox but not in EAF-browser. Edit: By the way, Firefox gives no erros

[MatthewZMD]

Not a lot of clues at the moment. Do you have the EAF Browser ad-blocker turned off?

[manateelazycat]

Same issue here with (doom) Emacs 28.05 on WSL. Org-roam-ui opens fine in Firefox but not in EAF-browser. Edit: By the way, Firefox gives no erros

I believe convert_index_html is works wrong with Windows that convert / with wrong char.

Can you replace load_index_html with below code in webengine.py:

    def load_index_html(self, app_file):
        self.buffer_widget.loadFinished.connect(self.init_app)

        self.index_file_dir = os.path.join(os.path.dirname(app_file), "dist")
        self.index_file = os.path.join(self.index_file_dir, "index.html")

        with open(self.index_file, "r") as f:
            html = self.convert_index_html(f.read(), self.index_file_dir)
            print(html)
            self.buffer_widget.setHtml(html, QUrl("file://"))

And paste content of *eaf* ?

[13thptr]

Same thing: js: TypeError: Object.fromEntries is not a function

[manateelazycat]

Same thing: js: TypeError: Object.fromEntries is not a function

Did you add print(html) ? I want to see html content that load in EAF browser. Please paste all content of *eaf* after add print(html) I need check whether something path wrong in html content.

[13thptr]

I did add this snippet. Is there anything more to do (apart from saving the file and maybe restarting Emacs ) ?

[manateelazycat]

I did add this snippet. Is there anything more to do (apart from saving the file and maybe restarting Emacs ) ?

Yes, restart Emacs

[13thptr]

I did, it didn't change anything.

[manateelazycat]

I didn't use org-roam, and haven't time try org-roam, no idea now, sorry.

[MatthewZMD]

I might try org-roam in the near future, I can have a look later.

[13thptr]

@manateelazycat No problem, thanks for your time @MatthewZMD That would be awesome.

[manateelazycat]

EAF not disable warning information that not print in Chrome console.

Print warning information not mean EAF browser have error that cause oram not working.

We should looks console print in EAF browser, not *eaf* buffer

[tefkah]

Hey, org-roam-ui guy here. The error that keeps popping up is probably due to the eaf browser not supporting the (Object.fromEntries)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries] function. I could probably fix this by including some polyfill for that function or transpiling down to a lower version of ES.

What version of ES does the EAF browser officially support?

[MatthewZMD]

Hey, org-roam-ui guy here. The error that keeps popping up is probably due to the eaf browser not supporting the (Object.fromEntries)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries] function. I could probably fix this by including some polyfill for that function or transpiling down to a lower version of ES.

What version of ES does the EAF browser officially support?

I just had a closer look, Object.fromEntries is supported at least on my system. Try M-i to open devtools in the EAF Browser and typing Object.fromEntries in the console should give the function definition:

> Object.fromEntries
ƒ fromEntries() { [native code] }

Are you able to see the same errors in devtools?

I'm wildly guessing it might have to do with node version, try this in terminal:

$ node
Welcome to Node.js v16.10.0.
Type ".help" for more information.
> Object.fromEntries
[Function: fromEntries]

[manateelazycat]

Hey, org-roam-ui guy here. The error that keeps popping up is probably due to the eaf browser not supporting the (Object.fromEntries)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries] function. I could probably fix this by including some polyfill for that function or transpiling down to a lower version of ES.

What version of ES does the EAF browser officially support?

Can you give me some org-roam-ui JS code for test? Thanks

[manateelazycat]

Today, after install org-roam and org-roam-ui, open http://localhost:35901/ , works well.

Please re-open this issue if you found some bug of EAF.

[chana1024]

when update PyQtWebEngine to 15.5.5,"Object.fromEntries" was sloved.but i found the new problem

[MatthewZMD]

Click on the framework-xxx...js link in the devtools and see what it looks like in it.

[chana1024]

pretty-print can't work,it maybe can't provide useful info.but i type " 'aa'.replaceAll('a','b') " in console,it show the webengine can't support replaceAll function. my webengine is 15.15.5