Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JavaScript not executing correctly #794

Closed
johannes-luebke opened this issue Oct 20, 2021 · 10 comments
Closed

JavaScript not executing correctly #794

johannes-luebke opened this issue Oct 20, 2021 · 10 comments
Labels
stale

Comments

@johannes-luebke
Copy link

Specification

  • pywebview version: 3.5
  • operating system: Windows and Mac
  • web renderer: edgechromium, edgehtml, cef, mshtml, macOS

Description

Using pywebview with flask and the require.js library gives an error in the Browser Console and stops require.js from working correctly.
Opening the flask localhost website from any other browser (tested Chrome, Firefox, PySide webview and the native-web-app package) works fine, without any errors.
I don't fully understand how pywebview creates its windows and renders the html, but it seems somewhere along the way it has an impact on the JavaScript execution.

Example to recreate the behaviour:
/main.py
/assets/
└ jquery.js
└ require.js
└ main.js
/templates/
└ index.html

/main.py

import webview
from flask import Flask
from flask import render_template

app = Flask(__name__, static_folder='assets')


@app.route('/')
def index():
    return render_template('index.html')


webview.create_window("Bug Demo", app)
webview.start(debug=True)

/assets/main.js

alert("MAIN");

require(['jquery'], function ($) {
    $('#output').html('Hello World!')
})

/templates/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Javascript -->
    <script data-main="{{ url_for('static', filename='main') }}"
        src="{{ url_for('static', filename='require.js') }}"></script>
</head>

<body>
    <h1>Index</h1>
    <h1 id="output"></h1>
</body>

</html>

Expected Behavior:

  • pywebview window opens
  • alert message "MAIN" appears
  • "Hello World!" gets inserted by jquery

Observed Behavior:

  • pywebview window opens
  • alert message "MAIN" appears
  • "Hello World!" doesn't get inserted by jquery
  • Browser Console shows:
require.js:5 
        
       Uncaught Error: Mismatched anonymous define() module: function $AMD$(){ return context[name]; }
https://requirejs.org/docs/errors.html#mismatch
    at makeError (require.js:5)
    at T (require.js:5)
    at Object.s [as require] (require.js:5)
    at requirejs (require.js:5)
    at main.js:3
  • Opening webpage from other browser results in expected behavior

Practicalities

  • YES I am willing to work on this issue myself.

  • NO I am prepared to support this issue financially.
@r0x0r
Copy link
Owner

r0x0r commented Oct 21, 2021

  1. Do you get the same behaviour with all the renderers?
  2. Would it work if you load your script separately via a new script tag?

pywebview does not perform any special magic when it comes to handling Javascript. I don't see any reason why it would not work, except only the case if the chosen renderer is not supported by requirejs

@johannes-luebke
Copy link
Author

  1. Yes I tried with all the available renderes on Windows and the one on Mac. They all examine the same issue. Using a different browser to navigate to the flask server works fine. There I tried Chrome, Firefox, Edge and some other python libraries that rely on opening the default browser. I came to the conclusion that there must be some issue with pywebview as it works fine everywhere else just in pywebview I get this error.
  2. I tried that but unfortunately require.js seems to rely on this single entry point script tag. Using a second script tag to load my main.js results in an error on all clients. While there is a way to use multiple require entry points it still shows the same issues.

I can't really put my finger on the problem right now as I can only recreate it with pywebview and no other browser. But if you say there is nothing special about pywebview in regards to javascript I will simply look for an alternative to require.js

@r0x0r
Copy link
Owner

r0x0r commented Oct 25, 2021

Could you post the entire zipped example? I can take a look at it.

@johannes-luebke
Copy link
Author

bug-demo.zip
Here you go.

@r0x0r
Copy link
Owner

r0x0r commented Oct 26, 2021

The official requirejs documentation addresses this issue https://requirejs.org/docs/errors.html#mismatch
Have you tried any of proposed solutions?

@r0x0r
Copy link
Owner

r0x0r commented Oct 26, 2021

As a side note, it works on the second try after you refresh the page.

@johannes-luebke
Copy link
Author

As far as I understand the require.js documentation, this error mainly stems from the use of manually added script tags in the html document. Which I'm not doing. I'm loading all the scripts (jquery and my custom main.js) via the require.js api. For the require.js optimizer I don't really understand the documentation.
I wasn't really sure what to try, because it seems to be working fine in any other browser. Is pywebview adding any javascripts or script tags? Maybe that would cause this error.
As to your observation, that it works on a refresh: I did also see that sometimes, but more often than not it didn't work and most of the time on the third refresh it stopped working again.
I appreciate your time and just wanted to let you know, that I switched to a different approach an no longer use the require.js library. So if I'm the only one having this issue it might not be worth your time.

@github-actions
Copy link

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@github-actions github-actions bot added the stale label Nov 26, 2021
@github-actions
Copy link

github-actions bot commented Dec 1, 2021

The message to post on the issue when closing it. If none provided, will not comment when closing an issue.

@github-actions github-actions bot closed this as completed Dec 1, 2021
@maartenbreddels
Copy link

I also see the same issue with requirejs. I don't observe the error outside of pywebview, only for pywebview (on OSX).

@maartenbreddels maartenbreddels mentioned this issue May 25, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@r0x0r @maartenbreddels @johannes-luebke