Присваивание свойств только для чтения не допускается ошибка в IE 11 от React - PullRequest
Новая
       94

Присваивание свойств только для чтения не допускается ошибка в IE 11 от React

0 голосов
/ 05 августа 2020

Я пишу приложение React, которое должно поддерживать IE11, а также современные браузеры. Я использую плагин preset-env Babel вместе с полифилом обещаний, чтобы убедиться, что все работает, но новая страница, которую я только что добавил, вызывает эту ошибку в бесконечном l oop из IE11: 

SCRIPT5045: Assignment to read-only properties is not allowed in strict mode

Я прошел через весь свой код и подтвердил, что все выполняется без этой ошибки. Похоже, он исходит из библиотек React. Удаление всех деклараций use strict из всех файлов сценариев решает проблему. Если я удалю строгие объявления из всего, кроме response-dom.development. js, я получаю сообщение об ошибке из строки назначения window.event в следующем фрагменте кода: 

function callCallback() {
  // We immediately remove the callback from event listeners so that
  // nested `invokeGuardedCallback` calls do not clash. Otherwise, a
  // nested call would trigger the fake event handlers of any call higher
  // in the stack.
  fakeNode.removeEventListener(evtType, callCallback, false); // We check for window.hasOwnProperty('event') to prevent the
  // window.event assignment in both IE <= 10 as they throw an error
  // "Member not found" in strict mode, and in Firefox which does not
  // support window.event.

  if (typeof window.event !== 'undefined' && window.hasOwnProperty('event')) {
    window.event = windowEvent;
  }

Если я также ухожу в строгом объявлении в response.development. js, тогда ошибки прослеживаются до последней строки в моем файле index. html, что не имеет никакого смысла.

Мне интересно, это - известная ошибка React, и если есть лучший способ исправить ее, чем просто вручную удалить объявления use strict из файлов React.

Подробнее Я использую React v16. 13.1

Я подозреваю, что этот блок кода мог вызвать проблему: 

var styleLeft = {borderRight:'none'};
  var styleRight = {};
  var leftHiderStyle = {};
  var rightHiderStyle = {};

  if (props.activePage === 'header') {
    styleRight.background = '#fff';
    leftHiderStyle.display = 'block';
    rightHiderStyle.display = 'none';
  }
  else {
    styleLeft.background = '#fff';
    leftHiderStyle.display = 'none';
    rightHiderStyle.display = 'block';
  }

  return (
    <Frame>
      <div id="form-tabs">
        <button className="de-frame-tab" onClick={props.gotoHeader} style={styleLeft}>
          Header
          <div id="header-border-hider" className="tab-border-hider" style={leftHiderStyle}></div>
        </button>
        <button className="de-frame-tab" onClick={props.gotoDetails} style={styleRight}>
          Details
          <div id="details-border-hider" className="tab-border-hider" style={rightHiderStyle}></div>
        </button>
...