On built website, JS execution in IE10 within React components is unreliable

[pkiddie]

Steps to reproduce:

1. Clone https://github.com/pkiddie/gatsby-ie10-js-no-execute. This is gatsby-starter-default with inline JS on the page-2.js React component to dump executing js to the console.
2. Run gatsby build && gatsby serve.
3. Open http://localhost:9000/page-2/ in a modern Chrome browser. Note executing JS always dumped to console.
4. Open http://localhost:9000/page-2/ in IE10 (via modern.ie @ https://developer.microsoft.com/en-us/microsoft-edge/tools/vms or Browserstack), note that executing JS is not always dumped to console.

I have a fix which is to detect IE10 via window.navigator and then write out the script tags with defer in the async script loader (in packages/gatsby/cache-dir/static-entry.js, whose script is pulled from https://www.html5rocks.com/en/tutorials/speed/script-loading/). Happy to raise a PR for this.

[KyleAMathews]

Oh interesting — yeah would love a PR with a fix!

[serby]

I can confirm that the JavaScript doesn't load on IE 10 and below.

Replacing

// From https://www.html5rocks.com/en/tutorials/speed/script-loading/
!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",[
  "//other-domain.com/1.js",
  "2.js"
])

with

  <script async>
    ["/commons-534d18f5face37518363.js","/app-005e1218ce63f2df7633.js","/path---index-a0e39f21c11f6a62c5ab.js","/component---src-pages-index-js-4de036b7fc4e26c86a08.js","/component---src-layouts-index-js-92b3da70c9cda29096e6.js"].forEach(function (src) {
      document.write('<script src="' + src + '" defer></'+'script>');
    })
  </script>

Or reverting to this method fixes the problem:

acbc22e#diff-17fef9af76a6d94d53f65b63882293eaL153

[nik-s]

Also experiencing this on IE10 and IE9.

[KyleAMathews]

Since the scripts are added to the body not the head, we could get write of the custom script loader. Happy to take a PR!

[nzambello]

I'm having these issues, too. Is there a fix or a workaround? I should use this in production.

[thebarty]

@pkiddie same problem here. Have you created a pull request?

[nzambello]

@serby Did you have success with the workaround you were talking about? Did you resolved in any way?

[serby]

Yes, it works for us. We needed a quick fix, so we patch the NPM module post install just to get us working.

[nzambello]

Do you have any specific reference? Can you explain in a more detailed way how I can fix this?

[serby]

We do exactly as I mention above. #2807 (comment)

I've not spent time looking too closly, but it appears that the htmlrocks article that this method is taken from is wrong and the IE10 approach suggested doesn't work.

https://www.html5rocks.com/en/tutorials/speed/script-loading/

[nzambello]

@serby Thank you, so you took every script imported in every index.html and inserted those ones in the <script> you posted?

[serby]

In static-entry.js I reverted to this method:

  const scriptsString = scripts.map(s => `"${s}"`).join(`,`)
  postBodyComponents.push(
    <script
      key={`script-loader`}
      dangerouslySetInnerHTML={{
        __html: `/*<![CDATA[*/[${scriptsString}].forEach(function(s){document.write('<script src="'+s+'" defer></'+'script>')})/*]]>*/`,
      }}
    />
  )

[nzambello]

That's what I was looking for, thank you so much. I'll try this, hope will work for me, too.

[nzambello]

I did what @serby suggested, but I got the same result, IE doesn't load JavaScript (or at least JS doesn't have effect).

EDIT: I probably have another issue, discussed separately here: #5344.

UPDATE: I resolved with @serby suggestion and @fredrik-sogaard suggestion for the polyfill

Thank you all!