IE11 strict mode issues (inc. Mars Theme)

🙋Get Help
1

Hi there,

I am having some issue with frontity in IE11 (not exciting I know). The problem initially presented itself as all react functionality not working. Only frontity links would provide any ability to interact with the app. Not a single onClick would execute any react hook.

Looking at the console with a production build, the debugger was throwing the error Accessing the 'caller' property of a function or arguments object is not allowed in strict mode. I don’t know if this is the culprit for my app not working fully in IE11 but its the only error I get. I then tested this with your deployed demo of the mars theme and found the same error in the IE11 debugger.

Screenshot 2020-05-11 at 09.31.44
Screenshot 2020-05-11 at 09.31.442552Ă—1356 2 MB

This is a link to the production build of my app that is having the same issue: https://gfw-blog-headless.now.sh/.

As a side note, when testing the same pattern in dev mode for both app I get syntax errors in the IE11 console but havne’t gone down that path yet :).

Any help would be greatly appreciated. I can launch without IE11 support so Im a little stuck.

Also loving the project :partying_face:

Thanks,

Ed

2

IE11 support is SSR-only. I’m sorry, that should be clearly stated in our docs.

@documentation-team could you please add a task to add it?

If need to support IE11, our recommendation is to add an script to the head like this:

import { Head } from "frontity";

const IE11Logic = () => (
  <Head>
    <script
      dangerouslySetInnerHTML={{
        __html: `
        if (!window["Proxy"]) {
          // Do your changes here.
        }
        `,
      }}
    />
  </Head>
);

In your case, my recommendation would be to add either a footer or an additional page for the “Topics”, More" and “Language” menus.

If you want to go with the footer, you can add it with React:

const IE11Footer = () => (
  <ul
    id="ieFooter"
    css={css`
      display: none;
    `}
  >
    {/* links... */}
  </ul>
);

And then show it and link to it with the script that gets executed in IE11:

const IE11Logic = () => (
  <Head>
    <script
      dangerouslySetInnerHTML={{
        __html: `
        if (!window["Proxy"]) {
          document.getElementById("ieFooter").style.display = "block";
          document.getElementById("topicsLink").href = "#ieFooter";
          document.getElementById("moreLink").href = "#ieFooter";
          document.getElementById("languagesLink").href = "#ieFooter";
        }
        `,
      }}
    />
  </Head>
);

Is there something else that you need to add support for?

1 Like
5

Thanks for the quick response! Ok that might explain it. Might be a problem then for myself.

I’ll take a look at the support functions you gave above but I’m not sure it will solve my issue. For me the functionality I need it to be able to use react inside the app in IE11.

For example at the base of my landing page I have a button that when clicked it uses a hook to load more posts. In IE11 this doesn’t trigger anything.

Screenshot 2020-05-11 at 11.53.08
Screenshot 2020-05-11 at 11.53.082078Ă—926 94.6 KB

6

You can do this:

var nextPageLink = window.location.pathname + "/page/2";
if (/\/page\/\d+/.test(window.location.pathname)) {
  var nextPageNumber = parseInt((/\/page\/(\d+)/.exec(window.location.pathname) || ["", "1"])[1]) + 1;
  nextPageLink = window.location.pathname.replace(/\/\d+/, "/" + nextPageNumber);
}
document.getElementById("Load More").href = nextPageLink;

Again, please accept my apologies for not clearly stating this in our docs.

The approach of Frontity is to prioritize modern browser performance and user experience, while keeping only moderate compatibility with old browsers. We don’t expect feature parity between the SSRed version and the hydrated version.

By old browsers, I basically mean IE11 and by moderate compatibility, I mean that the page loads and can be read.

If you need to give some support to IE11, think of the SSRed-only version as something similar to Google AMP. It’s an alternative version of your page, without the enhanced experience of React.

By the way, once we release the @frontity/amp package, if you are thinking about adding support for AMP, we were thinking about adding an option like this:

packages: [
  {
    name: "@frontity/amp",
    state: {
      amp: {
        redirectIE11: true
      }
    }
  },
  ...
];

And the visitors on IE11 will be automatically redirected to the AMP version.

@documentation-team I think we should add this table:

Platform Support
Node 10+
Browsers without Proxy (like IE11) No hydration (SSR only)
Browsers with Proxy Full hydration

And explain the design approach in Frontity regarding this.

10

Added proper clarifications regarding browser support in the docs → https://docs.frontity.org/about/browser-support

1 Like
11

Thanks for the detailed info. I understand your approach.

For myself it might be a deal breaker. I have components that open drop downs in my header and other JS driven interactions that if all JS is ignored on IE11 then it is kind of pointless to let it render there for our users. All of my dependancies support IE11 so it is a shame to lose that option.

Is there anyway I can disable the IE11 SSR only build and add custom babel/webpack support for this? It would be a nice option to have control over this.

12

The problem is that the polyfill of the ES6 Proxy is not feature complete, so there is no guarantee that it will replicate the exact behavior of the real Proxy and therefore is not safe to use.

If you were planning to add support for Google AMP, you can use that version for IE11. If not, and the footer option with all the links doesn’t suit your needs, you can show a pop-up warning people that they may not enjoy the full experience, and encourage them to update to the latest Microsoft Edge version, which has a IE11 support mode for compatibility with old websites, but uses Chromium for the rest.

I’m really sorry I can’t be of more help here. If you let me know what other features apart from dropdown links you need, I may be able to think about some ideas.

13

I’ll investigate AMP and have a think about how I might solve this. Appreciated IE11 is a real pain. Supporting it makes life rather difficult some days.

Thank you for your help, I really appreciate it. I love the project and very grateful you are solving all the tricky problems with headless Wordpress. Glad I could help improve the docs somewhat too :slight_smile:

14

Oh, feedback on what to improve would be really helpful!

Let us know and, if that is the case, we will bump the priority of the @frontity/amp package a notch although it’s already a top priority.

15

Hey @e.j.a.brett I’ve been checking your repo and I can see that you finally launched the project using Frontity so I guess you were able to fix the IE11 issues.

Could you explain what was your approach? I think this information will be really useful for the community :blush:

1 Like