错误：评估失败：ReferenceError：_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default 未定义答案

【问题标题】：Error: Evaluation failed: ReferenceError: _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default is not defined错误：评估失败：ReferenceError：_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default 未定义
【发布时间】：2021-02-19 00:24:54
【问题描述】：

当我尝试运行脚本（使用 webpack）时出现此错误

Error: Evaluation failed: ReferenceError: _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default is not defined     at __puppeteer_evaluation_script__:2:27

但是当我运行不使用 webpack 的相同代码时，我得到了预期的结果。

这是我的功能。

const getMeenaClickProducts = async (title) => {
  const url = ` ${MEENACLICK}/${title}`;

  console.log({ url });

  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(url);
  await page.waitForSelector('.ant-pagination-total-text');

  const products = await page.evaluate(() => {
    const cards = [...document.querySelectorAll('.card-thumb')];
    console.log({ cards });

    return cards.map((card) => {
      const productTitle = card.querySelector('.title').innerText;
      const priceElement = card.querySelector('.reg-price');
      const price = priceElement ? priceElement.innerText : '';
      const image = card.querySelector('.img').src;
      const link = card.querySelector('.main-link').href;

      return {
        title: productTitle,
        price,
        image,
        link,
      };
    });
  });

  await browser.close();

  const filteredProducts = products
    .filter((product) =>
      product.title.toLowerCase().includes(title.toLowerCase())
    )
    .filter((item) => item.price);

  return filteredProducts;
};

可能是什么原因？

【问题讨论】：

标签： node.js webpack web-scraping babeljs puppeteer

【解决方案1】：

问题出在 Babel 和这部分：

  const products = await page.evaluate(() => {
    const cards = [...document.querySelectorAll('.card-thumb')];
    console.log({ cards });

    return cards.map((card) => {
      const productTitle = card.querySelector('.title').innerText;
      const priceElement = card.querySelector('.reg-price');
      const price = priceElement ? priceElement.innerText : '';
      const image = card.querySelector('.img').src;
      const link = card.querySelector('.main-link').href;

      return {
        title: productTitle,
        price,
        image,
        link,
      };
    });
  });

您作为函数参数传递的page.evaluate() 脚本内部并不是传递给页面实例的实际代码，因为首先您使用 babel 对其进行转换。您在这部分中使用的数组扩展运算符：

    const cards = [...document.querySelectorAll('.card-thumb')];

很可能在您的 build 中被转换为名为 _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default 的函数，然后将其传递给 puppeteer page 上下文，并最终在该页面中执行。但是这样的函数没有在那个上下文中定义，这就是你得到一个 ReferenceError 的原因。

一些修复它的选项：

不要将扩展运算符与您正在使用的当前 babel 配置结合使用，因此转换后的构建不包括 polyfill/replacement。考虑具有等效效果的替代品，例如：

    const cards = Array.from(document.querySelectorAll('.card-thumb'));

或者更传统的 for / forEach() 循环并自己构建数组即可完成工作。

更新您的 babel 配置/目标语言级别以原生支持扩展运算符。

【讨论】：