Problem using Flask-Moment in IE11 and Edge

[evilocku]

Hi -

I'm learning Python Flask and I've built my first simple website. In one of the HTML templates I've included the line:
<p>The current date and time is: {{ moment().format('MMMM Do YYYY, h:mm:ss a') }}.</p>

My init.py file contains the lines:
from flask_moment import Moment

moment = Moment(app)

My base.html file contains:
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{{ moment.locale(auto_detect=True) }}
{% endblock %}

This works fine in Firefox and Chrome, but returns no datetime information in IE11 or Edge.

I'm running the Flask app on localhost:5000.

I've attached screenshots from the four browsers to illustrate the problem.

I'm running MS Windows 10 Home (64-bit) on a Lenovo ThinkPad laptop with Python 3.8.2 (32-bit) and Flask 1.1.2. I'm using Flask_Bootstrap4 4.0.2.

Apologies if this isn't the right place to raise this question, but I've searched extensively online (stackoverflow, etc) and I haven't been able to find any information that has helped me to resolve it.

Please let me know if you need any further information.

Many thanks

Firefox

Chrome

IE11

Edge

[miguelgrinberg]

Did you look in the browser's console for errors?

[evilocku]

Yes, in IE11 the console shows:

SCRIPT5009: 'moment' is undefined

[miguelgrinberg]

There must be some previous error to that. The application includes moment.js, which defines the moment variable, so something must have happened that prevented the js file to load.

[evilocku]

Screenshots of the Console and Debugger attached, showing where the errors are occurring.

[miguelgrinberg]

Look for errors in the network tab please.

[evilocku]

[evilocku]

It seems that the problem with fontawesome also occurs in Firefox (and, presumably, in Chrome). Firefox console shows the following message: The resource from “https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/fontawesome-all.min.css” was blocked due to MIME type (“application/xml”) mismatch (X-Content-Type-Options: nosniff).

Firefox seems to be more 'tolerant' of this error than IE11.

[miguelgrinberg]

The fontawesome thing is unrelated. The problem is that your page isn't loading moment.js.

[evilocku]

Why is it working in Firefox and Chrome but not in IE11 and Edge?

[miguelgrinberg]

I can't really say. All I can tell you is that the page isn't requesting moment.js, so it is logical that the extension would not work. Did you compare the HTML of your page between IE11 and Firefox/Chrome? There must be differences.

[evilocku]

I've checked the page source HTML in Firefox against that in IE11, both visually and using File Compare from the Windows Command Prompt, and they seem to be identical.

The HTML is a bit messy (I guess that's partly down to the way that Bootstrap has stitched it together), but, as I said earlier, it works without any obvious problems in Firefox and Chrome.

I've attached a copy of the HTML file for your reference.

ie11.zip

[miguelgrinberg]

The html that you sent includes moment.js from URL https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js. This URL is valid and works for me. However, I do not see this URL being requested in your network log. Any idea why?

[evilocku]

IE11 seems to have some difficulty with that link. If I try to access it directly, I get a message: "The publisher of moment-with-locales.min.js couldn't be verified."

If I access the link directly in Firefox, the browser displays the file as text. The Firefox network log shows that it's being requested successfully (status 200) in that browser.

I tried adding https://cdnjs.cloudflare.com as a Trusted Site with Low security level in IE11, but that didn't help. In fact, a new error message appeared in the Console: "Unable to get property 'fn' of undefined or null reference" in bootstrap.min.js, and the page didn't request jquery.min.js or popper.min.js from cdnjs.cloudflare.com either.

So, I'm a bit lost now.

My main reason for using Flask-Moment is to auto-detect the user's locale so that I can display dates and times in the correct way using the 'll' and 'LT' formats. Perhaps there's an easier way for me to do this, although I haven't yet found one. I managed to get something working in Python using the winreg module to read the user's International settings from HKEY_CURRENT_USER\Control Panel, but that's going to be no use on Unix machines or mobile devices. Do you have any suggestions? How does auto-detect work in Flask-Moment?

[evilocku]

I think that I've answered my own question.

I'm going to try getting the browser language settings with window.navigator and then using those to look up the appropriate date and time formats in a table that I'll create in my app database. That way I won't have to hard code lots of different formats into a Python module.

Moment is probably too 'heavyweight' for my simple needs, so I'll drop it from this project.

Thanks, anyway, for responding so quickly to my initial post. I'm going to close the issue now.