Fetch in Internet Explorer?

Question

Following code does not work on IE at all.

fetch("{{{LINK TO API}}}", {
    headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
    }
})
    .then(resp => resp.json())
    .then(function(json) {
        // SET VARIABLES
        var seller = json.sellers[Math.floor(Math.random() * Math.floor(json.sellers.length))];
        
        // INSERT COMPANY LOGO
        companyLogo.src = json.logo_url;

        // INSERT SELLER PROFILES
        document.querySelectorAll("[data-seller-profile]").forEach(wrapper => {
            var innerHTML = "";
            innerHTML += "<img class='hbba-profile-img' src='" + seller.profile_image + "'>";
            innerHTML += "<div class='hbba-desc-wrapper'>";
            innerHTML += "<span class='hbba-desc-name'>" + seller.name + "</span>";
            innerHTML += "<span class='hbba-desc-title'>" + seller.job_title + "</span>";
            innerHTML += "</div>";
            innerHTML += "<div class='hbba-is-active'></div>";
            wrapper.innerHTML = innerHTML;
        });
    });

The code is in a Webpack environment and gets complied with @babel/preset-env, as well as @babel/polyfill as entry: ["@babel/polyfill", "./src/main.js"],.

Compiled code: fetch("https://helpbox-by-avense.se/api/company/1/init-info",{headers:{Accept:"application/json","Content-Type":"application/json"}}).then(function(t){return t.json()}).then(function(t){var n=t.sellers[Math.floor(Math.random()*Math.floor(t.sellers.length))];u.src=t.logo_url,document.querySelectorAll("[data-seller-profile]").forEach(function(t){var e="";e+="<img class='hbba-profile-img' src='"+n.profile_image+"'>",e+="<div class='hbba-desc-wrapper'>",e+="<span class='hbba-desc-name'>"+n.name+"</span>",e+="<span class='hbba-desc-title'>"+n.job_title+"</span>",e+="</div>",e+="<div class='hbba-is-active'></div>",t.innerHTML=e})})

What should be change in order for it to work on IE?

Possible duplicate of [Babel not Polyfilling Fetch when using babel-preset-env](https://stackoverflow.com/questions/44908044/babel-not-polyfilling-fetch-when-using-babel-preset-env) — connexo, May 14 '19 at 19:55

connexo · Accepted Answer · 2019-05-14T20:11:37.100

2

You need an additional fetch polyfill, Babel won't polyfill this for you, and it won't transpile it either.

https://github.com/github/fetch

Also you don't target any browser in your .babelrc, so change it to

{
  "presets": [
    [ "@babel/preset-env", {
      "targets": {
        "browsers": [ "last 1 version", "ie >= 11" ],
        "node": "6.10",
        "esmodules": true
      }
    }]
  ],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

edited May 14 '19 at 20:11

answered May 14 '19 at 19:55

connexo

53,704
14
91
128

still not working. The `fetch` function works (the request can be found in Network-tab), but the rest of the code is not executed. – Melvin Hagberg May 14 '19 at 19:59
You might also need a `Promise` polyfill then. https://github.com/taylorhakes/promise-polyfill . Also, please show your `.babelrc`. – connexo May 14 '19 at 19:59
This might be helpful, too: https://stackoverflow.com/questions/52470124/promise-is-undefined-in-ie11-using-babel-polyfill/52470159#52470159 – connexo May 14 '19 at 20:02
.babelrc: `{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "6.10", "esmodules": true } } ] ], "plugins": ["@babel/plugin-proposal-object-rest-spread"] }` – Melvin Hagberg May 14 '19 at 20:04
You're not targetting IE 11, only Node. Added a sample config to fix that. – connexo May 14 '19 at 20:08
Does not seem to work. I will continue to troubleshoot tomorrow, so I will return to you then. Very thankful for your help. – Melvin Hagberg May 14 '19 at 20:30
@MelvinHagberg If my answer solved your problem, remember to mark it correct. – connexo May 16 '19 at 18:37

Fetch in Internet Explorer?

1 Answers1

Linked