未捕获的类型错误：$ 不是 core-js 中的函数

Question

我正在尝试安装 BigCommerce Open Checkout 脚本，当我尝试在本地运行基本安装时，当前遇到此错误：

Uncaught TypeError: $ is not a function
at eval (es.array.index-of.js?c975:15)
at Object../node_modules/core-js/modules/es.array.index-of.js

该文件是：

'use strict';
var $ = require('../internals/export');
var $indexOf = require('../internals/array-includes').indexOf;
var arrayMethodIsStrict = require('../internals/array-method-is-strict');
var arrayMethodUsesToLength = require('../internals/array-method-uses-to-length');

var nativeIndexOf = [].indexOf;

var NEGATIVE_ZERO = !!nativeIndexOf && 1 / [1].indexOf(1, -0) < 0;
var STRICT_METHOD = arrayMethodIsStrict('indexOf');
var USES_TO_LENGTH = arrayMethodUsesToLength('indexOf', { ACCESSORS: true, 1: 0 });

// `Array.prototype.indexOf` method
// https://tc39.github.io/ecma262/#sec-array.prototype.indexof
$({ target: 'Array', proto: true, forced: NEGATIVE_ZERO || !STRICT_METHOD || !USES_TO_LENGTH }, {
  indexOf: function indexOf(searchElement /* , fromIndex = 0 */) {
    return NEGATIVE_ZERO
      // convert -0 to +0
      ? nativeIndexOf.apply(this, arguments) || 0
      : $indexOf(this, searchElement, arguments.length > 1 ? arguments[1] : undefined);
  }
});

到目前为止，我已经多次尝试更新 core-js 和 NPM，但没有成功。

Answer 1

core-js 不应该由 Babel 编译。使用 webpack + babel 编译代码时，需要确保 babel-loader 的 webpack 模块规则排除 core-js。

选项1

告诉 webpack 不要对 node_modules 中的任何依赖项使用 babel-loader。由于 core-js 是 node_modules 中的依赖项，因此这会将 core-js 排除在 babel 处理之外。

// webpack.config.js
// This code snippet shows only the relevant part of the webpack config
module.exports = {
  module: {
    rules: [
      {
        test: /\.m?(j|t)sx?$/,
        // Excluding node_modules means that core-js will not be compiled
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
}

选项2

告诉 webpack 使用 babel 编译所有依赖项，除了 core-js 依赖项：

// webpack.config.js
// This code snippet shows only the relevant part of the webpack config
module.exports = {
  module: {
    rules: [
      {
        test: /\.m?(j|t)sx?$/,
        // Compile all node_modules except core-js
        include: {
          and: [/node_modules/],
          not: [/core-js/]
        },
        use: ['babel-loader']
      }
    ]
  }
}

相关链接

• https://github.com/zloirock/core-js/issues/912
• https://webpack.js.org/configuration/module/#ruleexclude
• https://webpack.js.org/configuration/module/#ruleinclude
• https://webpack.js.org/configuration/module/#rule-conditions

Answer 2

我第二次来到这里，我找到了解决方案，然后忘记了，所以如果没有其他人，这就是未来的我。

来自自述文件https://github.com/bigcommerce/checkout-js

• 节点 >= v16
• NPM >= v8。
• 基于 Unix 的操作系统。

节点版本对我来说并不重要，v18 很好，但由于我在 Windows 上，我需要在 WSL 中执行 npm 操作，它在普通 Windows 上不起作用。