时间戳

首页 > 解决方案 > 错误：评估失败：ReferenceError：_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default 未定义

node.js - 错误：评估失败：ReferenceError：_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default 未定义

问题描述

当我尝试运行脚本（使用 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.jswebpackweb-scrapingbabeljspuppeteer

解决方案

问题出在 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，然后将其传递给 puppeteerpage上下文，并最终在该页面中执行。但是这样的函数没有在那个上下文中定义，这就是你得到一个 ReferenceError 的原因。

一些修复它的选项：

  1. 不要将扩展运算符与您正在使用的当前 babel 配置结合使用，因此转换后的构建不包括它的填充/替换。考虑具有等效效果的替换，例如：
    const cards = Array.from(document.querySelectorAll('.card-thumb'));

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

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

推荐阅读