Fetch: TypeMismatchedError on Edge

[davidtran]

I am running my website with Edge on Window 10. Here is the code the produce the TypeMismatchedError, code: 17

return new Promise((resolve, reject) => {
    return fetch('/api/search/trips', {
      method: 'POST',
      headers: {
        "x-access-token": "example-key",
        'Accept': 'application/json',
        'Content-Type': 'application/json; charset=utf-8'
      },
      body: JSON.stringify(searchData)
    })
    .then(response => response.json())
    .then(json => resolve(json))
    .catch(err => reject(err))
  })

This code throws TypeMismatched exception before any request could be fired. I write it with Webpack.

It works fine in other Chrome, Firefox and Safari.
Do you have any idea ?

[dgraham]

Try running the fetch call from within Edge's web console to isolate the code without other dependencies like Webpack.

This handler needs to detect if the request returned a successful response before consuming the JSON response body.

.then(response => response.json())

should be something like this

.then(response => {
  if (response.ok) {
    return response.json()
  } else {
    // HTTP status code not in 200-299 success range
    // Could be 401, 404, 500, etc.
  }
})

Fetch only invokes the catch handler in cases where a Response cannot be created, like network failures, for example. If the HTTP request and response cycle succeeded, the then handler is invoked, even if the HTTP status code is a failure.

Edge has a native implementation of window.fetch and does not use this polyfill code, so I'll close out this issue.

[davidtran]

It even doesn't fire any request, just throw error. The funny thing is that code works in the console. But not from my redux actions. I think Webpack has done something wrong with fetch.

[Titozzz]

I have the exact same problem. But I guess the answer is does not have to be on this repo but rather around here
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8546263/

[davidtran]

In order to workaround this issue, I managed to use superagent instead of fetch

[nolanlawson]

(I'm on the Edge team.) We attemped to reproduce this bug and were unable (using Edge 14.14393) . Here is my reproducible test case; please extend as necessary in order to reproduce the bug: https://gist.github.com/nolanlawson/54d29e82036bed5410adf9767d8cc64a

[mislav]

Thanks @nolanlawson for keeping an eye on this!

[mislav]

Perhaps it was the same cause as #409, which is a bug marked "fixed" in Edge.

[davidtran]

Thanks @nolanlawson

I have looked at your gist.

There is no issue when I use fetch directly on browser, but issue happens when I use webpack and import fetch into my app to make request.

[mariusandra]

I found this closed issue when investigating a bug with a Edge + fetch that resulted in a TypeMismatchedError.

For me everything worked fine until there was a non-ascii character in the payload, such as the "é" in "Mathématiques".

In @nolanlawson 's test case, if I change

  body: JSON.stringify({foo: 'bar'})

to

  body: JSON.stringify({foo: 'bér'})

then it fails.

This SO issue explains the workaround I used: https://stackoverflow.com/questions/39419250/fetch-api-doesnt-work-with-non-english-characters-in-microsoft-edge

[Olliebaba]

I also ran into the issue where the fetch wasn't even showing in the network tab and console reported a TypeMismatchError.

This was specifically happening to me on the production build of my application but not when it was in dev mode.

What fixed it for me was setting babel-polyfill before whatwg-fetch in the webpack config's entry:

const entry = [
  'babel-polyfill',
  'whatwg-fetch',
  PATHS.app,
]