使用Puppeteer时出现'Uncaught ReferenceError: require is not defined'错误求助

错误原因 #

1. require是Node.js专属语法：浏览器环境不支持CommonJS模块的require加载方式，这是后端Node.js的特性。
2. Puppeteer不能在浏览器前端运行：Puppeteer是Node.js端的浏览器自动化工具，依赖Node.js的系统API和本地Chromium实例，无法直接在前端页面代码中调用。

解决方案：前后端分离重构 #

把Puppeteer的逻辑放到Node.js后端，前端通过HTTP请求调用后端接口执行自动化操作。

步骤1：搭建Node.js后端（创建server.js） #

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

// 解析请求数据
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 处理前端的浏览器启动请求
app.post('/launch-browser', async (req, res) => {
  try {
    const { imageLink } = req.body;
    if (!imageLink) return res.status(400).send('请输入有效URL');

    // 启动浏览器并访问目标地址
    const browser = await puppeteer.launch({ headless: false });
    const pages = await browser.pages();
    await pages[0].goto(imageLink);

    res.send('浏览器已启动并访问目标URL');
  } catch (err) {
    console.error(err);
    res.status(500).send('执行失败：' + err.message);
  }
});

// 托管前端静态文件
app.use(express.static('public'));

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

步骤2：修改前端代码（public/app.js） #

去掉require('puppeteer')，改成调用后端接口：

const image_input = document.querySelector('#image_input');
const image_downloader = document.querySelector('#image_downloader');
const section_image = document.querySelector('#image');

image_downloader.addEventListener('click', async (e) => {
    e.preventDefault();
    const image_link_value = image_input.value;
    
    // 显示输入的图片
    const createImage = document.createElement('img');
    createImage.src = image_link_value;
    section_image.appendChild(createImage);

    // 调用后端接口启动Puppeteer
    try {
        const resp = await fetch('/launch-browser', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ imageLink: image_link_value })
        });
        console.log(await resp.text());
    } catch (err) {
        console.error('请求出错：', err);
    }
});

步骤3：项目结构与运行 #

1. 项目文件夹结构：

your-project/
├── server.js
├── public/
│   ├── index.html  # 你的HTML文件
│   └── app.js       # 修改后的前端JS文件

2. 初始化项目并安装依赖：

npm init -y
npm install express puppeteer

3. 启动服务器：

node server.js

4. 在浏览器中访问http://localhost:3000，输入URL点击按钮即可正常执行。

内容的提问来源于stack exchange，提问作者aryan raj