Keystone-classic: IE11 doesn't support responseType: json

Created on 23 Nov 2016 · 10Comments · Source: keystonejs/keystone-classic

Steps to reproduce the behavior

Using IE (even IE11), access the admin panel. Any website is fine, even the demo website. You might need fix #3733 to do that.
Select a model to list all its entries

Expected behavior

See the entries

Actual behavior

The entries aren't shown and the loader stays where it is. The error occurs in the method showBlankState(). The reason is that the value of this.props.items is a string and not an array. Therefore, IE isn't able to access the property results and this code this.props.items.results.length generates an error.

bug help wanted

Source

AurelioDeRosa

👍3

Most helpful comment

An easy workaround for accessing the items only (e.g. no add or edit) is to add the following snippet:

if (typeof data === 'string') {
   data = JSON.parse(data);
}

to all the XHR requests that return a JSON file. Specifically, those are the calls that have responseType: 'json'. They can be find in the following files:

keystone/admin/client/utils/List.js
keystone/fields/types/relationship/RelationshipField.js
keystone/fields/types/relationship/RelationshipFilter.js

In general the snippet must go before data is used in the callback of the Ajax call.

AurelioDeRosa on 12 Dec 2016

🎉1 👍1

All 10 comments

I found out that the issue is due to https://github.com/naugtur/xhr/issues/123.

AurelioDeRosa on 23 Nov 2016

Issue is due to IE not handling responseType correctly. If you can't bet on responseType in your supported browsers, set json option to true instead of using responseType.

naugtur on 23 Nov 2016

@JedWatson did you have a chance to look at this issue?

AurelioDeRosa on 28 Nov 2016

I've done some further research and the solution proposed isn't viable. When json is set to true, it expects a serializable object to be set as the value of the body option. The CMS sends a FormData object which is not serializable.

AurelioDeRosa on 29 Nov 2016

In that case it's even simpler.
Froget setting json at all, receive a string and run JSON.parse. You also gain more control over situations where it wouldn't parse.

naugtur on 29 Nov 2016

@JedWatson This seems pretty critical - not supporting an entire browser. How do you want to go about fixing this?

jstockwin on 11 Dec 2016

Guys, point me to instructions and write failing tests in a branch and I can fix that for you. Or get one of my students to choose this as their first PR :)

naugtur on 11 Dec 2016

We currently don't run tests in IE, else this would most likely have been picked up by them.

A PR that fixes it is always welcome though!

jstockwin on 11 Dec 2016

An easy workaround for accessing the items only (e.g. no add or edit) is to add the following snippet:

if (typeof data === 'string') {
   data = JSON.parse(data);
}

to all the XHR requests that return a JSON file. Specifically, those are the calls that have responseType: 'json'. They can be find in the following files: