尝试在 Typescript 中运行 Puppeteer 时出现 ReferenceError答案

【问题标题】：ReferenceError when trying to run Puppeteer in Typescript尝试在 Typescript 中运行 Puppeteer 时出现 ReferenceError
【发布时间】：2022-03-31 23:00:10
【问题描述】：

我正在尝试在带有 Typescript 的 SvelteKit 项目中使用 Puppeteer。我正在使用this boilerplate。

我做到了：

npm install --save-dev puppeteer @types/puppeteer

我创建了一个.ts 文件并放入：

import * as puppeteer from 'puppeteer';

然后我将该.ts 文件导入我的.svelte 文件之一。

当我将我的应用程序部署到localhost 以在我的浏览器中呈现所述.svelte 文件时，会显示此错误：

ReferenceError: process is not defined
    at node_modules/pump/index.js (http://localhost:3000/node_modules/.vite/puppeteer.js?v=bf147010:16220:33)
    at __require2 (http://localhost:3000/node_modules/.vite/chunk-UC7LELEO.js?v=bf147010:48:44)
    at node_modules/get-stream/index.js (http://localhost:3000/node_modules/.vite/puppeteer.js?v=bf147010:16346:16)
    at __require2 (http://localhost:3000/node_modules/.vite/chunk-UC7LELEO.js?v=bf147010:48:44)
    at node_modules/extract-zip/index.js (http://localhost:3000/node_modules/.vite/puppeteer.js?v=bf147010:17730:21)
    at __require2 (http://localhost:3000/node_modules/.vite/chunk-UC7LELEO.js?v=bf147010:48:44)
    at node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js (http://localhost:3000/node_modules/.vite/puppeteer.js?v=bf147010:26161:41)
    at __require2 (http://localhost:3000/node_modules/.vite/chunk-UC7LELEO.js?v=bf147010:48:44)
    at node_modules/puppeteer/lib/cjs/puppeteer/node/Puppeteer.js (http://localhost:3000/node_modules/.vite/puppeteer.js?v=bf147010:27326:31)
    at __require2 (http://localhost:3000/node_modules/.vite/chunk-UC7LELEO.js?v=bf147010:48:44)

我该如何解决？

这些都不起作用：

正在安装@types/node。
Modifying my tsconfig.js.

【问题讨论】：

嘿，拥有您的package.json 将有助于重现问题。当然，在 GitHub 上做一个“骨架”项目会更好。
@ironstone13 这是我从 -github.com/ollefrost/ollesvelke 开始的 sveltekit 样板；将其添加到问题中
谢谢！那么，您的构建过程是怎样的呢？我假设svelte-kit build 没有开箱即用地构建.ts，所以你需要一个插件，或者直接使用tsc 编译？
它使用vite-plugin-svelte，default sveltekit template 也使用它
我不确定是否应该将 puppeteer 导入（直接或间接）到 .svelte 文件中。我希望您有一个单独的测试运行程序进程，该进程启动并启动一个无头浏览器来运行针对您的 Svelte 应用程序的测试，而不是用作应用程序本身的一部分。

标签： typescript puppeteer svelte sveltekit

【解决方案1】：

您收到SSR 错误。 .svelte 文件中的代码首先在服务器中运行，而且 puppeteer 似乎无法在服务器上启动虚拟浏览器实例。

解决此问题的最简单方法是检查您是否在浏览器中运行。您可以通过从$app/env 导入browser 变量来做到这一点：

import { browser } from "$app/env";

if (browser) {
    import('puppeteer').then(puppeteer => {
        // Do your stuff
    })
}

如果您想导出模块（或其他任何内容），您可以导出一个空变量并稍后为其赋值。

import { browser } from "$app/env";

export let puppeteer;

if (browser) {
    import('puppeteer').then(module => {
        puppeteer = module
    };
}

您还可以考虑禁用 SSR 并制作一个 SPA。但是，它是heavily discouraged in the SvelteKit docs，所以我建议不要这样做。

【讨论】：

另外，您必须从模板中的 svelte.config.js 文件中删除 target: '#svelte'（我必须自己删除它才能让您的演示工作！）。