SCRIPT5005：需要字符串 - Rxjs 在 IE 11 符号 polyfill 上崩溃

Question

在工作中，我们（叹息！）为我正在处理的当前项目支持 IE 11。该项目使用 RxJS 6.

为了支持我们包含的大部分功能，我们将 Webpack 与 Babel 和 core-js（根据 Babel 本身的建议）用作 polyfiller。

如果我们尝试导入 RxJS，我们的应用程序加载会卡在特定行：

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

错误 SCRIPT5005: String Expected。

我们正在使用 RxJS 的 es5 转译版本。所以代码原始打字稿代码应该是this one.

我知道 IE 11 不支持符号，根据 Kangax's Ecmascript compatibility table 并且 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"]

第二行和第三行returns我一个对象。如果我手动 Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]] 它仍然 returns 我的错误。

不允许通过对象访问 Object.prototype（因为使用对象作为索引会使容器对象自动调用键上的 .toString()）。因此 IE returns 我那个错误。或者，至少，我认为这可能是原因。

更奇怪的是，Symbol.for("test") returns 是一个与 _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).

关于这个问题的任何线索以及我们如何解决这个问题？这可能是 polyfill 的问题吗？

我在我的 webpack 配置和我的 .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"]
    }
  }
}

谢谢。

Answer 1

TL;DR

因为我们有一个包含多个项目的 monorepo（一个 "sample app" 在其内部加载另一个项目），我在示例应用程序和该项目中都包含了 core-js polyfill。他们在某种程度上是相互矛盾的，我仍然不确定为什么以及如何。这与 rxjs 无关，但影响了它。

此外，我在 babel-loader 的 webpack.config.js 上写了一个错误的正则表达式，但我不确定这是否真的影响了所有人。

原来是：/node_modules\/(core-js|(react.+)|(rxjs.+))/

应该是：/node_modules\/(core-js|rxjs|react[^\s+]*)/

因为我必须以包为目标，而不是像我想的那样以文件为目标。我在 react 上添加了一个更复杂的正则表达式以匹配 react-dom 或其他 react-things（如果有的话）。

我能够创建一个可以毫无问题地运行的示例应用程序。我发现 RxJS 以某种方式拥有自己的符号 polyfill。

事实上，运行 that sample 使用 React、webpack、babel、rxjs 但 not core-js，没有给出任何问题。（注意：示例已安装 core-js）。

设置断点 Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]]，揭示了这一点：

在使用 core-js 时，它揭示了这一点：

尽管有和没有样品存在这种差异，但它在该样品上效果很好。所以我想这是怎么可能的，并认为我在某处读到 polyfill 应该只在最全局的对象中加载一次。

由于我们正在一个单一仓库中开发一个项目，该项目具有基于 React 的网站和另一个在运行时导入的复杂 React 组件，并且该网站似乎也需要 polyfill，因此我添加了 core-js import在这两个项目上。

通过删除网站上的那个，错误改变了（它卡在了与这个无关的另一点）。

此外，如 TL;DR 中所述，我认为应用于 babel-loader 的正则表达式存在问题。

SCRIPT5005：需要字符串 - Rxjs 在 IE 11 符号 polyfill 上崩溃

SCRIPT5005: String expected - Rxjs crashes on IE 11 symbol polyfill

javascript

rxjs

internet-explorer-11

core-js