SCRIPT5005: ожидается строка - Rxjs падает на полифилле IE 11 - PullRequest
Новая
       37

SCRIPT5005: ожидается строка - Rxjs падает на полифилле IE 11

1 голос
/ 24 октября 2019

На работе у нас есть (вздох!) Поддержка IE 11 для текущего проекта, над которым я работаю. В проекте используется RxJS 6.

Для поддержки большинства функций, которые мы включили, мы использовали Webpack с Babel и core-js (как предложено самой Babel) в качестве полифиллера.

Если мы пытаемся импортировать RxJS, загрузка нашего приложения застревает в определенной строке: 

Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]] = function () {
        return this;
};

с ошибкой SCRIPT5005: String Expected.

Мы используем версию с переносом es5RxJS. Таким образом, исходный код машинописного кода должен быть этот .

Я знаю, что символы не поддерживаются в IE 11 согласно таблице совместимости Ecmascript в Kangax и core-jsвключает в себя polyfill для символов, и мы импортируем все polyfill.

На самом деле, если я пытаюсь запустить это с polyfill после ошибки через консоль, она отлично работает. 

var obj = {};

Object.defineProperty(obj, Symbol.for("test"), {
    value: 5
});

Что странно, так это то, что если я попытаюсь установить точку останова на строке, которая выдаст нам ошибку, я смогу получить доступ к этим компонентам по отдельности без проблем. 

Observable.prototype
_symbol_observable__WEBPACK_IMPORTED_MODULE_2__
_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]

Вторая и третья строки возвращают мнеобъект. Если я сделаю вручную Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]], он все равно выдаст мне ошибку.

Доступ к Object.prototype через объект не разрешен (так как использование объекта в качестве индекса заставляет контейнерный объект автоматически вызывать .toString() для ключа). Поэтому IE возвращает мне эту ошибку. Или, по крайней мере, я думаю, что это может быть причиной.

Что еще страннее, Symbol.for("test") возвращает объект, который совпадает с _symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"] (с description: test вместо observable). И если я сделаю obj[Symbol.for("test")], это будет отлично работать.

Кроме того, мне кажется, что я не могу создавать переменные или что-то подобное, пока я остановлен на точке останова в консоли IE 11, поэтому я даже не могу экспортировать этоСимвол, чтобы проверить это позже (это позволяет мне сделать var x = {}; или var x = 5, но если я назову 'x', это бросит меня 'x' is undefined).

Любые подсказки об этой проблеме и как мы могли бырешить это? Может быть, это проблема полизаполнения?

Я прикрепляю сюда под моим конфигом веб-пакета и моим .babelrc 

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
          },
        },
        exclude: /node_modules\/(core-js|(react.+)|(rxjs.+))/,
      },
      ...
    ]
  }
}

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-flow",
    ["@babel/preset-env", {
      "targets": {
        "browsers": [
          "last 2 versions",
          "safari >= 7",
          "Explorer 11"
        ]
      },
      "useBuiltIns": true
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime"
  ],
  "env": {
    "test": {
      "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]
    }
  }
}

Спасибо.

1 Ответ

0 голосов
/ 28 октября 2019

TL; DR

Так как у нас есть монорепо с несколькими проектами («пример приложения», которое загружает другой проект изнутри), я включил полифил core-js ив образце приложения и в этом проекте. Они были как-то противоречивы, я до сих пор не уверен, почему и как. Это не касалось rxjs, но влияло на него.

Кроме того, я написал неправильное регулярное выражение для webpack.config.js на babel-loader, но я не уверен, что это действительно повлияло на все.

Это было: /node_modules\/(core-js|(react.+)|(rxjs.+))/

Это должно было быть: /node_modules\/(core-js|rxjs|react[^\s+]*)/

Поскольку я должен был ориентироваться на пакеты, а не на файлы, как я думал. Я добавил более сложное регулярное выражение для реагирования, чтобы сопоставить также реакцию-дом или другие реактивные вещи (если таковые имеются).

Мне удалось создать пример приложения, которое могло бы работать без проблем. Я обнаружил, что RxJS каким-то образом имеет свой собственный polyfill для символов.

Фактически, работает этот образец с React, webpack, babel, rxjs, но not core-js, wasnНикаких проблем. ( Примечание : в примере установлено core-js).

Установка точки останова на Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]], показывает это:

without core-js

При использовании core-js выявляется это:

with core-js

Хотя эта разница, как си без образца, он отлично работает на этом образце. Поэтому я подумал, как это возможно, и подумал, что где-то читал, что полифил должен быть загружен только один раз в самый глобальный объект.

Поскольку мы разрабатываем проект в режиме моно-репо с веб-сайтом на основе React и другим сложным компонентом React, который импортируется во время выполнения, и на этом веб-сайте, по-видимому, также требуются полифиллы, я добавил core-js import onоба проекта.

Удалив один из них на веб-сайте, ошибка изменилась (она застряла в другом пункте, не касающемся этого).

Более того, как сказано в TL; DR,Я думаю, что была проблема с регулярным выражением, примененным к babel-loader.

...