IE11 Object expected

[ghost]

Hi,

I've tested in IE11 and am seeing this 👍
Object expected

I'm using the IE pollyfills here: <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>

Any ideas?

Cheers! If you need any further info please let me know.

[ghost]

I figured this out

I just added a check that el was defined here:

function createTooltip (el, value, modifiers) {
  if(el){
    let position = 'top-center'
    for (const pos of positions) {
      if (modifiers[pos]) {
        position = pos
      }
    }
    position = position.replace('-', ' ')

    const content = value.content || value

    let classes = directive.options.defaultClass
    if (value.classes) {
      classes = value.classes
    }

    el._tooltip = new Tooltip({
      target: el,
      position,
      content,
      classes,
      tetherOptions: directive.options.tetherOptions,
    })
  }
}

All working great in IE 11 now!

[langemike]

Got the same error today.

I found out Babelify transform this source code:

function getPlacement (value, modifiers) {
  let placement = value.placement
  for (const pos of positions) {
    if (modifiers[pos]) {
      placement = pos
    }
  }
  return placement
}

In to this:

function getPlacement(value, modifiers) {
	var placement = value.placement;
	var _iteratorNormalCompletion = true;
	var _didIteratorError = false;
	var _iteratorError = undefined;


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

			if (modifiers[pos]) {
				placement = pos;
			}
		}
	} catch (err) {
		_didIteratorError = true;
		_iteratorError = err;
	} finally {
		try {
			if (!_iteratorNormalCompletion && _iterator.return) {
				_iterator.return();
			}
		} finally {
			if (_didIteratorError) {
				throw _iteratorError;
			}
		}
	}

	return placement;
}

Which causes the "Object expected" error. I believe it got something to do with Symbol.iterator.

Found some related articles:

• IE 10-11 Symbol polyfill issue polyfillpolyfill/polyfill-service#792
• Babel generating ES6 Symbol babel/babel#1534
• for...of loop produces "Uncaught TypeError: myObject[Symbol.iterator] is not a function" error babel/babel-loader#84

Still figuring out what the best solution will be... Using a polyfill, prevent Babelify to transform this code etc.

[langemike]

I fixed it by replacing the iteratee code within v-tooltip.umd.js to the following:

function getPlacement(value, modifiers) {
	var placement = value.placement
  for (var i = 0; i < positions.length; i++) {
		var pos = positions[i];
    if (modifiers[pos]) {
      placement = pos
    }
  }
  return placement;
}

Because the source is already transpiled by Babelify, this seems like the best option for me.

I've learned that Babelify transforms this code in to iteratee code because "for .. of" loop is used.

Is it maybe possible to add this change within a next release of v-tooltip? It's a minor change and it fixes compatibility issues with IE10 and 11 without the need of a polyfill etc.

[michaelpelletier]

Hey @Akryum - any ETA on when this will be fixed? I'd rather not fork but this is kind of a blocker for me. Thanks!

[superdav42]

@michaelpelletier Just forked it and made a PR. Also made a release branch which has the compiled dist files if you need it for npm install etc https://github.com/superdav42/v-tooltip#FixIERelease