在Svelte中导入Puppeteer后运行失败，出现Rollup构建错误

操作步骤 #

• 通过以下命令创建Svelte新项目：

  npx degit sveltejs/template svelte-app
  

• 参考教程完成基础项目搭建
• 在项目根目录安装Puppeteer：

  npm install puppeteer
  

• 在App.svelte中导入Puppeteer：

  <script>import puppeteer from "puppeteer";</script>
  

• 启动开发服务器：

  npm run dev
  

报错信息 #

> svelte-app@1.0.0 dev
> rollup -c -w

rollup v3.29.4
bundles src/main.js → public/build/bundle.js...
(!) "this" has been rewritten to "undefined"
https://rollupjs.org/troubleshooting/#error-this-is-undefined
node_modules/puppeteer-core/lib/esm/puppeteer/node/ScreenRecorder.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
                            ^
7:     var useValue = arguments.length > 2;
8:     for (var i = 0; i < initializers.length; i++) {
...and 5 other occurrences
node_modules/puppeteer-core/lib/esm/puppeteer/common/QueryHandler.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __addDisposableResource = (this && this.__addDisposableResource) || function (env, value, async) {
                                  ^
7:     if (value !== null && value !== void 0) {
8:         if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
...and 3 other occurrences
node_modules/puppeteer-core/lib/esm/puppeteer/common/HandleIterator.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __addDisposableResource = (this && this.__addDisposableResource) || function (env, value, async) {
                                  ^
7:     if (value !== null && value !== void 0) {
8:         if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
...and 3 other occurrences

...and 28 other files
(!) Plugin node-resolve: preferring built-in module 'buffer' over local alternative at 'C:\Users\ORDINATEUR\Desktop\Projects\Website\SerieFollower\node_modules\buffer\index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
[!] (plugin commonjs--resolver) RollupError: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules/escodegen/package.json (2:10)
1: {
2:     "name": "escodegen",
             ^
3:     "description": "ECMAScript code generator",
4:     "homepage": "http://github.com/estools/escodegen",
    at error (C:\Users\ORDINATEUR\Desktop\Projects\Website\SerieFollower\node_modules\rollup\dist\shared\rollup.js:353:30)
    at Module.error (C:\Users\ORDINATEUR\Desktop\Projects\Website\SerieFollower\node_modules\rollup\dist\shared\rollup.js:15237:16)
    at Module.tryParse (C:\Users\ORDINATEUR\Desktop\Projects\Website\SerieFollower\node_modules\rollup\dist\shared\rollup.js:15968:25)
    at Module.setSource (C:\Users\ORDINATEUR\Desktop\Projects\Website\SerieFollower\node_modules\rollup\dist\shared\rollup.js:15569:39)
    at ModuleLoader.addModuleSource (C:\Users\ORDINATEUR\Desktop\Projects\Website\SerieFollower\node_modules\rollup\dist\shared\rollup.js:25804:20)

问题原因 #

Puppeteer是Node.js专属的服务端库，它依赖Node.js核心API（如文件系统、进程管理），且需要在服务端环境启动Chrome浏览器实例。直接在前端Svelte组件中导入会导致：

1. Rollup打包时无法处理Node.js专属模块，出现this重写、JSON文件解析等错误
2. 前端浏览器环境没有Puppeteer运行所需的权限和系统资源，即使打包成功也无法执行

解决方案 #

正确做法：将Puppeteer移到后端服务 #

1. 在项目中新建Node.js后端服务（比如用Express框架）
2. 在后端代码中导入Puppeteer，编写页面爬取/自动化操作逻辑
3. 前端Svelte通过API请求调用后端接口，获取Puppeteer处理后的结果

示例后端代码（Express）：

// backend/server.js
const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

app.get('/scrape', async (req, res) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const title = await page.title();
  await browser.close();
  res.json({ title });
});

app.listen(3000, () => console.log('Backend running on port 3000'));

前端调用示例：

<!-- App.svelte -->
<script>
  let pageTitle;
  async function fetchData() {
    const response = await fetch('http://localhost:3000/scrape');
    const data = await response.json();
    pageTitle = data.title;
  }
</script>

<button on:click={fetchData}>获取页面标题</button>
{#if pageTitle}
  <p>页面标题：{pageTitle}</p>
{/if}

错误方案说明 #

不要尝试通过安装Rollup插件（如@rollup/plugin-json）解决表面报错，这些只能暂时处理打包问题，但无法让Puppeteer在前端环境正常运行——浏览器不允许启动外部进程（如Chrome）。

内容的提问来源于stack exchange，提问作者Nathan Costantini