React-tooltip: Microsoft Edge: Object doesn't support property or method 'Symbol(Symbol.iterator)'

[ibc]

My React app generates a JS bundle with browserify+babel (presets "react" and "es2015", and plugins "transform-runtime", "transform-object-assign" and "transform-object-rest-spread"), and it includes react-tooltip.

When in Microsoft Edge 15, I get this error when the <Tooltip> component is "rendered":

Object doesn't support property or method 'Symbol(Symbol.iterator)'

I know that there are some issues with Babel + Symbol and that, sometimes, a Babel polyfill is required (I don't use polyfills in my app but just Babel runtime transformations as listed above). However, Edge does natively support Symbol. I mean: typeof Symbol() === "symbol" and so on.

So no idea about the origin of this error. However it just happens when using react-tooltip.

The error stack points to here (look for "// HERE"):

exports.default = function (target) {
  target.prototype.bindRemovalTracker = function () {
    var _this = this;

    var MutationObserver = getMutationObserverClass();
    if (MutationObserver == null) return;

    var observer = new MutationObserver(function (mutations) {
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = mutations[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var mutation = _step.value;
          var _iteratorNormalCompletion2 = true;
          var _didIteratorError2 = false;
          var _iteratorError2 = undefined;

          try {
            for (var _iterator2 = mutation.removedNodes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
              var element = _step2.value;

              if (element === _this.state.currentTarget) {
                _this.hideTooltip();
                return;
              }
            }
          } catch (err) {
            _didIteratorError2 = true;
            _iteratorError2 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion2 && _iterator2.return) {
                _iterator2.return();
              }
            } finally {
              if (_didIteratorError2) {
                throw _iteratorError2;
              }
            }
          }
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;  // HERE
          }
        }
      }
    });

    observer.observe(window.document, { childList: true, subtree: true });

    this.removalTracker = observer;
  };

  target.prototype.unbindRemovalTracker = function () {
    if (this.removalTracker) {
      this.removalTracker.disconnect();
      this.removalTracker = null;
    }
  };
};

[petrogad]

I'm seeing this pretty consistently too. Any planned fix?

[vladimirivanoviliev]

Same issue here.

[januszhou]

+1

[mvehar]

+1

[nik-lampe]

+1

[mvehar]

Quick solution:

// Pollyfill for Edge - react tooltip
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator]

[pemasora]

+1, same problem

[pemasora]

How to use that quick solution? That error is breaking some javascript on IE

[danielearwicker]

IE 11 broken by this also, as it doesn't even have Symbol. Going to try including the source in my own project.

[ibc]

Guys, as the README clearly states this project is looking for maintainers:

I learnt a lot from creating and maintaining react-toolip, but now I start putting my focus on other challenges, so just let me know by sending email to [email protected] if you have interests in maintaining the project :)

So it's expected that the author won't fix this. If someone has the knowledge and the will to maintain this project, please contact him.

I do know that adding +1 in the issue comments is much easier than taking the work with you and solving problems, but this is what we have.

[kristiankeane]

I fixed this by replacing:

for (const mutation of mutations) {
for (const element of mutation.removedNodes) {

with the loop equivalent:

for (var m1 = 0; m1 < mutations.length; m1++) {
const mutation = mutations[m1]
for (var m2 = 0; m2 < mutation.removedNodes.length; m2++) {
const element = mutation.removedNodes[m2]

Make this substitution in src/decorators/trackRemoval.js and rebuild.

[pranavq212]

I am version 3.4.0, still broken on IE 11 on Windows 7. Please not we can't have IE edge more than version IE 11 on windows 7, upgrading to Windows 10 is still not in picture.

Error is Symbol is undefined at

for (var _iterator = mutations[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {

in trackRemoval.js line 20

[pranavq212]

Resolution to this issue for IE 11 for me is to install polyfillwhich can make babel to compile Symbol

1. Installbabel-polyfill
npm install --save babel-polyfill

2. Import babel-polyfill before react-tooltip
   import "babel-polyfill";

If you are not using npm then you can use cdn to add polyfill js like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js">

Make sure you already have babel runtime & dependency in webpack or npm package.json

Helpful links:
https://babeljs.io/docs/usage/polyfill/
https://stackoverflow.com/questions/33828840/symbol-is-undefined-in-ie-after-using-babel

[aronhelser]

@kristiankeane I adopted your solution of simply using a 'for' loop.

Everyone who has the opportunity, please try this again with v3.4.2, and re-open if needed.