SPFX 1.7.1 Webpart在IE11上不起作用

时间:2019-01-29 10:29:58

标签: internet-explorer-11 spfx

我已经创建了一个新的SharePoint Web部件(1.7.1版本)。我使用的是反应模板。网络的一部分是非常基本的,但不会对IE 11运行

返回的错误是 对象不支持属性或方法“查找”

我没有在任何.ts文件中使用find,因此我发现从.ts文件中转换的.js文件正在调用.find方法。

有人可以确认这是SPFX v1.7.1中的错误吗? 如果是这样,有解决方案吗?

我知道可以通过引入垫片来解决此问题,但是我不知道如何为SPFX配置它,也找不到任何说明如何执行此操作的文档。

欢迎任何帮助。

4 个答案:

答案 0 :(得分:0)

如果我没记错的话,这是因为IE 11不支持React引擎使用的Element.closest

我个人已经使用element-closest来填充它,尽管我确定还有其他选择。

// beginning of WebPart code file
import 'element-closest/browser';

import * as React from 'react';
import * as ReactDom from 'react-dom';
// rest of the code, etc.

答案 1 :(得分:0)

参考this article,我们可以看到Array.prototype.find()方法不支持IE浏览器。但是,此方法已添加到ECMAScript 2015规范中,可能并非在所有JavaScript实现中都可用。但是,您可以使用以下代码片段填充Array.prototype.find:

// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    },
    configurable: true,
    writable: true
  });
}

据我所知,当我们使用React时,默认情况下,生成的react项目支持所有现代浏览器。对Internet Explorer 9、10和11的支持需要polyfills。您可以检查它并导入相关的软件包。

答案 2 :(得分:0)

您可以调整tsconfig.json文件:在“ compilerOptions”下将“ target”设置为“ es5”。 Typescript将为您创建polyfill。

答案 3 :(得分:0)

我有同样的问题。在webpart.ts文件中使用此导入。

import 'core-js/modules/es6.array.find';