Issues in IE 11 #1756

ikorgik · 2018-04-04T15:44:13Z

Fixes for several issues in IE 11 we found during slate integration:

Objects are not valid as a React child (found: object with keys {size, _origin, _capacity, _level, _root, _tail, ownerID, hash, __altered}). If you meant to render a collection of children, use an array instead. in span (at text.js:130)

Unable to get property 'childNodes' of undefined or null reference

Objects are not valid as a React child (found: List [ [object Object] ]). If you meant to render a collection of children, use an array instead.

zhujinxuan · 2018-04-04T17:26:11Z

A bit unrelated question: Have you tried babel-polyfill in building the web?

I remember there are several includes methods requiring babel-polyfill for IE in final build

ikorgik · 2018-04-04T17:38:17Z

Hi @zhujinxuan, didn't try it in this case, but use some other polyfills in my project like:
es6-shim, some packages from core-js (es7/array, symbol) and polyfill for closest

bsouthga · 2018-04-12T18:35:19Z

would be awesome to get this in, looks like the build error is just from prettier not liking a semicolon.

bsouthga · 2018-04-12T18:39:54Z

for more context, we are seeing the same issues in IE 11 with default core-js

sethmcleod

I'm not a maintainer of this project, but I've made a few suggestions. Overall these changes look good!

sethmcleod · 2018-04-16T22:27:01Z

packages/slate-html-serializer/src/index.js

@@ -327,8 +329,8 @@ class Html {
    const { document } = value
    const elements = document.nodes.map(this.serializeNode).filter(el => el)
    if (options.render === false) return elements
-
-    const html = renderToStaticMarkup(<body>{elements}</body>)
+    // Converts List to Array to support IE 11.


Could this and similar comments be updated to say COMPAT: Converts List to Array for IE11 support for consistency with other compatibility comments?

sethmcleod · 2018-04-16T22:27:14Z

packages/slate-html-serializer/src/index.js

@@ -343,14 +345,17 @@ class Html {
  serializeNode = node => {
    if (node.object === 'text') {
      const leaves = node.getLeaves()
-      return leaves.map(this.serializeLeaf)
+      const children = leaves.map(this.serializeLeaf);


Looks like this semicolon needs to be removed.

sethmcleod · 2018-04-16T22:28:38Z

packages/slate-html-serializer/src/index.js

@@ -121,6 +121,8 @@ class Html {
   */

  deserialize = (html, options = {}) => {
+    // Provides default value to make it working in IE 11.


Could we update this comment to something along these lines: COMPAT: Provide a default value for IE11 support

ianstormtaylor · 2018-04-27T20:38:00Z

Hey @ikorgik, thank you for this. Could you make the changes to the comments to append COMPAT: to them, to match the rest of the codebase.

For the serializer change, does it need to be '<p></p> or can it be just an empty string ''? I'd rather not force the paragraph default on folks to be hardcoded here.

terenceodonoghue · 2018-05-10T01:47:36Z

I'm hitting the same problem in IE11.

Unable to get property 'childNodes' of undefined or null reference

Is there an interim fix that I might be able to use in the meantime?

enzoferey · 2018-06-23T16:28:49Z

Hi, we are facing issues in IE11 as well. We are using the slate-html-serializer, which we could fix its incompatibility by having a default initial state of "<p></p>" instead of "". Regarding Slate itself, we have noticed that the placeholder prop was introducing errors. We will be working on fixing everything along next week and I will update you here based on our advancements. Have a nice weekend and thanks for this amazing library ! 🙌

enzoferey · 2018-07-02T19:07:40Z

One of my teammates reported me this:

"The problem is that IE11 lets users select placeholder text, which is disabled with css on other browsers.
By selecting I mean it should have pointer-events disabled"

Dunno if that is helpful for you in any way. I will take a look at it pretty soon anyways ;)

danielsarin · 2018-08-16T12:41:46Z

I think I managed to track down the Unable to get property 'childNodes' of undefined or null reference error and submitted a pull request. But for now you can also fix it by supplying the modified parser as a custom parseHtml to the serializer. Ex.

const parseHtml = (html) => {
  const parsed = new DOMParser().parseFromString(html, 'text/html')
  const { body } = parsed
  // COMPAT: in IE 11 body is null if html is an empty string
  return body || window.document.createElement('body')
}

const html = new Html({ rules, parseHtml });

#### Is this adding or improving a _feature_ or fixing a _bug_? This should fix `Unable to get property 'childNodes' of undefined or null reference` error in IE11 when using slate-html-serializer and deserializing an empty string (#1757, #1756). #### What's the new behavior? The `defaultParseHtml` now returns an empty body element if the parsed body is null. I tested this in the latest Chrome, Firefox and Safari, and they all seemed to work similarly. If the html param was an empty string, `parseFromString` returned a document element, which had a body property which was an empty body element. In IE11 though the body property was null, which caused the undefined or null reference later. #### Have you checked that...? * [x] The new code matches the existing patterns and styles. * [x] The tests pass with `yarn test`. * [x] The linter passes with `yarn lint`. (Fix errors with `yarn prettier`.) * [x] The relevant examples still work. (Run examples with `yarn watch`.)

#### Is this adding or improving a _feature_ or fixing a _bug_? This should fix `Unable to get property 'childNodes' of undefined or null reference` error in IE11 when using slate-html-serializer and deserializing an empty string (ianstormtaylor#1757, ianstormtaylor#1756). #### What's the new behavior? The `defaultParseHtml` now returns an empty body element if the parsed body is null. I tested this in the latest Chrome, Firefox and Safari, and they all seemed to work similarly. If the html param was an empty string, `parseFromString` returned a document element, which had a body property which was an empty body element. In IE11 though the body property was null, which caused the undefined or null reference later. #### Have you checked that...? * [x] The new code matches the existing patterns and styles. * [x] The tests pass with `yarn test`. * [x] The linter passes with `yarn lint`. (Fix errors with `yarn prettier`.) * [x] The relevant examples still work. (Run examples with `yarn watch`.)

ianstormtaylor · 2019-11-28T02:34:37Z

As of #3093 (which was just merged), I believe this issue is no longer applicable, because a lot has changed. I'm going through and closing out any potential issues that are not out of date with the overhaul. Thanks for understanding.

Fixed issues in ie11

0a62a3e

ikorgik changed the title ~~Fixed issues in ie11~~ Issues in ie11 Apr 4, 2018

ikorgik changed the title ~~Issues in ie11~~ Issues in IE 11 Apr 4, 2018

ikorgik mentioned this pull request Apr 4, 2018

Issues in IE 11 #1757

Closed

sethmcleod suggested changes Apr 16, 2018

View reviewed changes

ianstormtaylor added ⚑ waiting bug labels Apr 27, 2018

danielsarin mentioned this pull request Aug 16, 2018

IE11 html serializer parser fix #2087

Merged

4 tasks

ianstormtaylor mentioned this pull request Nov 14, 2019

Next #3093

Closed

ianstormtaylor closed this Nov 28, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issues in IE 11 #1756

Issues in IE 11 #1756

ikorgik commented Apr 4, 2018

zhujinxuan commented Apr 4, 2018 •

edited

Loading

ikorgik commented Apr 4, 2018

bsouthga commented Apr 12, 2018 •

edited

Loading

bsouthga commented Apr 12, 2018

sethmcleod left a comment

sethmcleod Apr 16, 2018 •

edited

Loading

sethmcleod Apr 16, 2018

sethmcleod Apr 16, 2018 •

edited

Loading

ianstormtaylor commented Apr 27, 2018

terenceodonoghue commented May 10, 2018 •

edited

Loading

enzoferey commented Jun 23, 2018 •

edited

Loading

enzoferey commented Jul 2, 2018 •

edited

Loading

danielsarin commented Aug 16, 2018

ianstormtaylor commented Nov 28, 2019

Issues in IE 11 #1756

Issues in IE 11 #1756

Conversation

ikorgik commented Apr 4, 2018

zhujinxuan commented Apr 4, 2018 • edited Loading

ikorgik commented Apr 4, 2018

bsouthga commented Apr 12, 2018 • edited Loading

bsouthga commented Apr 12, 2018

sethmcleod left a comment

Choose a reason for hiding this comment

sethmcleod Apr 16, 2018 • edited Loading

Choose a reason for hiding this comment

sethmcleod Apr 16, 2018

Choose a reason for hiding this comment

sethmcleod Apr 16, 2018 • edited Loading

Choose a reason for hiding this comment

ianstormtaylor commented Apr 27, 2018

terenceodonoghue commented May 10, 2018 • edited Loading

enzoferey commented Jun 23, 2018 • edited Loading

enzoferey commented Jul 2, 2018 • edited Loading

danielsarin commented Aug 16, 2018

ianstormtaylor commented Nov 28, 2019

zhujinxuan commented Apr 4, 2018 •

edited

Loading

bsouthga commented Apr 12, 2018 •

edited

Loading

sethmcleod Apr 16, 2018 •

edited

Loading

sethmcleod Apr 16, 2018 •

edited

Loading

terenceodonoghue commented May 10, 2018 •

edited

Loading

enzoferey commented Jun 23, 2018 •

edited

Loading

enzoferey commented Jul 2, 2018 •

edited

Loading