IE11 - error blocks the whole app to load

m0jimo commented 3 years ago

if you try to open a page of markdown-it in IE11 it doesn't show the markdown result but page is loaded. Which is OK, because you can inform a user about IE11 incompatibility.

Describe the bug If the qmarkdown extension is added to the existing project or just opened the online demo it crash the IE11 from the beginning, so there is no way to inform user that it wouldn't work properly.

To Reproduce

Go to qmarkdown demo
Open IE11 dev tools.
Error SCRIPT1002 wrong syntax
Go to markdownit
Open IE11 dev tools
Error SCRIPT10002 but page is loaded

Expected behavior Would be there a way to avoid crashing IE11 completely?

hawkeye64 commented 3 years ago

@m0jimo That's news to me. Could have happened with the last markdown-it update. Any ideas what or where in the code is causing the issue?

m0jimo commented 3 years ago

It might be related to not polyfilled functions. It rise errors about webpack. There are some examples but i can try to investigate it after weekend.

m0jimo commented 3 years ago

@hawkeye64 the first investigation when trying to run a dev version locally is pretty simple. There is a missing IE11 in the Browser List. ui/dev/package.

"last 1 version, not dead, ie >= 11"

Demo ui/demo has been working locally in IE11 but not on website. So, the .json change above doesn't have a influence on it.

After building an extension I don't see any difference in dist folder files (except extra file src/components/QMarkdown.json - but it has no effect for extension).

m0jimo commented 3 years ago

Here is more information from IE11 - run form my application.

hawkeye64 commented 3 years ago

On the live docs, it appears to be an issue with the Mermaid plugin (which isn't part of QMarkdown, but is used as an example of how to add a markdown-it plugin into QMarkdown)

I'll investigate a bit more.

hawkeye64 commented 3 years ago

Got it running on ie11

This is not an issue with QMarkdown, but the site. It's because it's running as a JAMstack on github.io, some extra work had to be done to handle routes. In particular, it's this code:

<!DOCTYPE html>
<html>
  <head>
    <title><%= productName %></title>

    <meta charset="utf-8">
    <meta name="description" content="<%= productDescription %>">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
    <link rel="icon" type="image/ico" href="favicon.ico">
  </head>
  <body>
    <script>
      (function(){
        let redirect = sessionStorage.redirect;
        delete sessionStorage.redirect;
        if (redirect && redirect !== location.href) {
          history.replaceState(null, null, redirect);
        }
      })();
    </script>

    <!-- DO NOT touch the following DIV -->
    <div id="q-app"></div>
  </body>
</html>

And, more specifically, this line:

        let redirect = sessionStorage.redirect;

IE11 does not understand the let and that file doesn't run through webpack, so it not updated properly. In this case, if you are building locally, you can change the let to var.

Because this does not really affect QMarkdown I am going to close this, but I won't be updating the site either to support IE11. On August 21, even if you start IE11, you will get Edge. There is support for IE11 for 1 more year from Microsoft, but that is only business accounts that have portals supporting 10000 or more employees. Officially, IE11 is dead. There is a lot of articles about it.

m0jimo commented 3 years ago

Thanks for confirming that qmarkdown is IE11 compatible (I could see it on my own eyes after cloning and running it).

quasarframework / quasar-ui-qmarkdown

IE11 - error blocks the whole app to load #213