JavaScript not loading on IE 11

nzambello commented 6 years ago

Description

On IE11, images are not showing: the base64 placeholder of gatbsy-image do, but the "real" ones don't. I had no issues using other browsers, this happens only in IE (I tested only in version 11, this is old enough :wink:). I don't have any error in the console. Inspecting the DOM, I saw there was a <img> element - like in other browsers - with the correct image sizes/resolutions in the <noscript> tag and copying that node in the correct position, beside the base64 image, I get the correct image and everything works fine.

For the moment, I guess I'll do an hack like this on IE, waiting for a solution.

Does anybody had issues like these ones?

Steps to reproduce

I'm using resolutions and sizes in Image components, so I can't find nothing particular in my use case. It's the basic and common usage of gatsby-image, I followed the docs and Kyle Gill's article.

Environment

Gatsby version (npm list gatsby): 1.9.259
gatsby-image version (npm list gatsby-image): 1.0.51
gatsby-cli version (gatsby --version): 1.1.50
Node.js version: 8.1.1
Operating System: Ubuntu 16.04.4 LTS / Linux 4.4.0-122-generic

File contents (if changed)

gatsby-config.js:

standard config for gatsby-image and dependencies, as in the docs

package.json:

{
  "name": "",
  "description": "",
  "version": "1.0.0",
  "author": "",
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.7",
    "@fortawesome/fontawesome-free-solid": "^5.0.12",
    "@fortawesome/fontawesome-pro-regular": "^5.0.12",
    "@fortawesome/react-fontawesome": "^0.0.19",
    "gatsby": "^1.9.259",
    "gatsby-image": "^1.0.51",
    "gatsby-link": "^1.6.44",
    "gatsby-plugin-i18n": "^0.4.2",
    "gatsby-plugin-postcss-sass": "^1.0.20",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-sharp": "^1.6.44",
    "gatsby-source-filesystem": "^1.5.35",
    "gatsby-transformer-sharp": "^1.6.24",
    "intl": "^1.2.5",
    "react-burger-menu": "^2.4.4",
    "react-helmet": "^5.2.0",
    "react-intl": "^2.4.0",
    "react-modal": "^3.4.4",
    "react-tabs": "^2.2.2"
  },
  "keywords": ["gatsby"],
  "license": "MIT",
  "scripts": {
    "build": "rm -rdf .cache/ && gatsby build",
    "develop": "rm -rdf .cache/ && gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "autoprefixer": "^8.4.1",
    "postcss-flexbugs-fixes": "^3.3.1",
    "prettier": "^1.12.1"
  }
}

nzambello commented 6 years ago

I'm sorry, I didn't see that probably images are not shown because JavaScript is not loaded. So, IMHO, my problem is caused by IE script handling, as described in #2807.

thebarty commented 6 years ago

same problem here. any solution?

nzambello commented 6 years ago

UPDATE

I tried to solve this issue with an help from #2807. Now - on IE11 - it's broken due to an issue on Symbol:

I get 'Symbol' is not defined and I guess it comes from gatbsy-plugin-i18n because it's about folktale (a dependecy).

So, I added babel-polyfill in gatsby-browser.js and I'm facing the same issue.

Any help? If adding the polyfill as indicated in #3314 and #2177 (and others) it's still breaking, what could I do?

fredrik-sogaard commented 6 years ago

We fixed it with comment on #2807. PR opened here: https://github.com/gatsbyjs/gatsby/pull/5404

nzambello commented 6 years ago

@fredrik-sogaard Unfortunately I didn't resolve my problem with your PR #5404. Did you have any suggestion?

Maybe it would work if I'll be able to resolve the Symbol issue. I added the polyfill but I'm still facing this issue.

fredrik-sogaard commented 6 years ago

Have you tried adding https://polyfill.io/v2/docs/ with the default set plus Symbol? Like so <script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,Symbol"></script>

nzambello commented 6 years ago

Thank you @fredrik-sogaard!! Now it's working fine, you saved me the day before the golive! :blue_heart:

trickydisco78 commented 6 years ago

I've fixed this by adding gatsby-plugin-polyfill-io to the project. What i want to know is how do i only do this for develop mode as this is all i need it for.

d3lm commented 6 years ago

I also had issues with my Gatsby site in IE11 and I was not able to get it up and running. I have tried several solutions suggested in this thread and finally I got it working with polyfill.io. If you experience the same issues and no other solution works then simply add a script tag to the head:

<Helmet>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js" />
</Helmet>

polyfill.io will read the User-Agent from the browser requesting the script and only include the polyfills you need.

All other solutions did not really work because some Webpack code was executed that uses Array.from which is not available in IE11. The polyfill had to be executed before any other code runs and the only way for me was to add a script tag to the head which is fetched and executed before any other script in the body is executed.

Finally my site runs in IE11 too 🎉

gatsbyjs / gatsby