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

【问题标题】：SCRIPT5005: String expected - Rxjs crashes on IE 11 symbol polyfillSCRIPT5005：需要字符串 - Rxjs 在 IE 11 符号 polyfill 上崩溃
【发布时间】：2019-10-24 16:40:06
【问题描述】：

在工作中，我们有（叹气！）为我正在进行的当前项目支持 IE 11。该项目使用 RxJS 6。

为了支持我们已经包含的大部分功能，我们使用了带有 Babel 的 Webpack 和 core-js（按照 Babel 本身的建议）作为 polyfill。

如果我们尝试导入 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"]

第二行和第三行返回一个对象。如果我手动执行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）。

关于这个问题的任何线索以及我们如何解决这个问题？这可能是 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"]
    }
  }
}

谢谢。

【问题讨论】：

我发现a post 关于Symbol 不是polyfill 的问题，你可以参考一下。问题的原因是babel 配置。 Babel 不应转换 core-js 以获得正确的工作。里面有解决方案，可以参考this solution。
您好@YuZhou，谢谢您的回复！我已经排除了core-js 在 babel 配置中的转译，它无效。我忘了说。我在上面的帖子中添加了我的 .babelrc 和 webpack 配置。
这似乎是与您的情况有关的特定问题。我无法仅使用上述信息重现该问题。您能否向我们提供a minimal example 和重现该问题的步骤？这样我们就可以更好地了解这个问题并在我们身边进行测试。
是的，这似乎是我的情况。错误改变了（万岁！）。我犯了不同的错误。我将创建一个回复以包含所有详细信息。我还将包括我为重现问题而制作的示例。谢谢@YuZhou！

标签： javascript rxjs internet-explorer-11 core-js

【解决方案1】：

TL;DR

由于我们有一个包含多个项目的 monorepo（一个在其内部加载另一个项目的“示例应用程序”），因此我在示例应用程序和该项目中都包含了 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。

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

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

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

尽管有这种差异，无论有无样本，它都可以完美地适用于该样本。所以我想这是怎么可能的，并认为我在某处读到 polyfill 应该只在最全局的对象中加载一次。

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

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

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

【讨论】：