Веб-часть SPFX 1.7.1 не работает в IE11

Я создал новую веб-часть SharePoint (версия 1.7.1). Я использую шаблон реакции. Веб-часть очень проста, но не работает в IE 11.

Возвращается ошибка: объект не поддерживает свойство или метод find.

Я не использую find ни в одном из моих файлов .ts, поэтому я обнаружил, что метод .find вызывается файлами .js, которые были перенесены из моих файлов .ts.

Кто-нибудь может подтвердить, что это ошибка в SPFX v1.7.1? Если да, то есть решение.

Я знаю, что это можно исправить, установив прокладку, но я не знаю, как настроить это для SPFX, и не могу найти никакой документации, объясняющей, как это сделать.

Любая помощь приветствуется.


spfx internet-explorer-11
person Peter    schedule 29.01.2019    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Если я правильно помню, это потому, что IE 11 не поддерживает Element.closest, который используется движком React.

Я лично использовал ближайший к элементу, чтобы заполнить его, хотя я уверен, что другие варианты существовать.

// 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.
person Richard Li    schedule 29.01.2019
comment
Привет, Ричард, у меня это не работает ... Я добавил поли-заливку с помощью npm install element-closest, а затем добавил импорт для всех файлов TS, которые имеют import * как React. У меня все еще есть ошибка. tslint также жалуется, что не смог найти файл объявления для модуля element-closest / browser ... - person Peter; 30.01.2019
comment
Рад видеть, что это разрешено другим ответом. После прочтения ответа Чжи Льва я понял, что эта Element.closest проблема может быть не связана, хотя мне определенно приходилось заполнять ее раньше для моих решений SPFx. В ответ на ваш последующий вопрос: да, это потому, что с этим пакетом не были установлены типы TypeScript - он все равно будет правильно выполнять полифил, и вы можете проигнорировать жалобу TSLint. - person Richard Li; 31.01.2019
comment
к сожалению, это не решило проблему ... это не jquery, вызывающий это ... - person Peter; 31.01.2019
comment
После удаления еще большего количества пакетов из моего кода я наконец нашел виновника, которым является пакет response-if ... у кого-нибудь есть опыт в исправлении этого? - person Peter; 31.01.2019
comment
Я закончил тем, что полностью удалил этот пакет и использовал стандартный способ реакции, чтобы сделать части рендеринга завершенными. - person Peter; 05.02.2019

arrow_upward
0
arrow_downward

См. эту статью, мы видим, что метод 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 по умолчанию сгенерированный проект реакции поддерживает все современные браузеры. Для поддержки Internet Explorer 9, 10 и 11 требуется полифиллы. Вы можете проверить это и импортировать связанные пакеты.

person Zhi Lv    schedule 30.01.2019
comment
Привет, Чжи Ур, я знаю, что полифиллы могут решить эту проблему ... вопрос был в том ... как включить полифилы в SPFX? Некоторое руководство по этой части было бы хорошей идеей ... вы даже можете задаться вопросом, почему MS больше не поддерживает свой собственный браузер в своей собственной технологии (SharePoint). Это чертовски неприятно !!!! - person Peter; 30.01.2019
comment
После некоторого расследования выяснилось, что проблема связана с включением JQUERY в проект. Стандартный проект с REACT действительно работает в IE. Извините за тираду! - person Peter; 30.01.2019
comment
Итак, я удалил jquery, но проблема не исчезла ... так как же использовать этот полифилл? - person Peter; 31.01.2019
comment
Вы должны иметь возможность вставить фрагмент кода в начало файла WebPart.ts. Он будет реализовывать метод Array.find() всякий раз, когда он вызывается другим кодом в веб-части, в том числе посредством любого импорта, который зависит от использования Array.find. - person Richard Li; 31.01.2019

arrow_upward
0
arrow_downward

Вы можете настроить свой файл tsconfig.json: установите "target" на "es5" в "compilerOptions". Машинопись создаст для вас полифиллы.

person Ruslan Korkin    schedule 27.03.2019

arrow_upward
0
arrow_downward

Я была такая же проблема. Используйте этот импорт в своем файле webpart.ts.

import 'core-js/modules/es6.array.find';
person Harsha Vardhini    schedule 10.05.2019
comment
Спасибо, но это меня не решает. - person Peter; 12.05.2019