I cannot pass `env.MYBROWSER` as an argument to `puppeteer.launch`.

I have a question regarding TypeScript and trying to use puppeteer. I am encountering a type error. In the following sample code, I cannot pass env.MYBROWSER as an argument to puppeteer.launch.
import puppeteer from "@cloudflare/puppeteer";

interface Env {
MYBROWSER: Fetcher;
}

export default {
async fetch(request: Request, env: Env): Promise<Response> {
const browser = await puppeteer.launch(env.MYBROWSER);
const page = await browser.newPage();
await page.goto("https://example.com");
const metrics = await page.metrics();
await browser.close();
return Response.json(metrics);
},
};
import puppeteer from "@cloudflare/puppeteer";

interface Env {
MYBROWSER: Fetcher;
}

export default {
async fetch(request: Request, env: Env): Promise<Response> {
const browser = await puppeteer.launch(env.MYBROWSER);
const page = await browser.newPage();
await page.goto("https://example.com");
const metrics = await page.metrics();
await browser.close();
return Response.json(metrics);
},
};
The error message for the argument is as follows:
The argument of type '{ fetch(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined): Promise<Response>; connect(address: string | SocketAddress, options?: SocketOptions | undefined): Socket; }' cannot be assigned to the parameter of type 'BrowserWorker'.
The type returned by 'fetch(...)' is not compatible between these types.
Type 'Promise<Response>' cannot be assigned to type 'Promise<global.Response>'.
Property 'type' does not exist on type 'Response' but is required in type 'import("path/node_modules/undici-types/fetch").Response'.ts(2345)
fetch.d.ts(191, 12): 'type' is declared here.
(property) Env.MYBROWSER: {
fetch(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined): Promise<Response>;
connect(address: string | SocketAddress, options?: SocketOptions | undefined): Socket;
}
The argument of type '{ fetch(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined): Promise<Response>; connect(address: string | SocketAddress, options?: SocketOptions | undefined): Socket; }' cannot be assigned to the parameter of type 'BrowserWorker'.
The type returned by 'fetch(...)' is not compatible between these types.
Type 'Promise<Response>' cannot be assigned to type 'Promise<global.Response>'.
Property 'type' does not exist on type 'Response' but is required in type 'import("path/node_modules/undici-types/fetch").Response'.ts(2345)
fetch.d.ts(191, 12): 'type' is declared here.
(property) Env.MYBROWSER: {
fetch(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined): Promise<Response>;
connect(address: string | SocketAddress, options?: SocketOptions | undefined): Socket;
}
Is there a solution to this issue?
9 Replies
zawa
zawaOP9mo ago
- tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"lib": ["esnext"],
"types": ["@cloudflare/workers-types"],
"isolatedModules": true,
"noEmit": true,
"strict": true,
"esModuleInterop": true
},
"include": ["src", "types"]
}
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"lib": ["esnext"],
"types": ["@cloudflare/workers-types"],
"isolatedModules": true,
"noEmit": true,
"strict": true,
"esModuleInterop": true
},
"include": ["src", "types"]
}
- package.json devDependencies
"devDependencies": {
"@cloudflare/puppeteer": "^0.0.6",
"@cloudflare/vitest-pool-workers": "^0.1.0",
"@cloudflare/workers-types": "^4.20240405.0",
"typescript": "^5.0.4",
"vitest": "1.3.0",
"wrangler": "^3.0.0"
}
"devDependencies": {
"@cloudflare/puppeteer": "^0.0.6",
"@cloudflare/vitest-pool-workers": "^0.1.0",
"@cloudflare/workers-types": "^4.20240405.0",
"typescript": "^5.0.4",
"vitest": "1.3.0",
"wrangler": "^3.0.0"
}
Chaika
Chaika9mo ago
The MyBrowser type should be BrowserWorker I believe. Worth mentioning as well this doesn't work in local dev, have to use dev --remote
zawa
zawaOP9mo ago
Thanks to you, I was able to resolve the error. However, when I ran wrangler dev, I encountered a new error. Is this a bug?
[wrangler:err] TypeError: Cannot read properties of undefined (reading 'fetch')
[wrangler:err] TypeError: Cannot read properties of undefined (reading 'fetch')
Chaika
Chaika9mo ago
did you see my comment about local dev? You need to use remote dev, ex: npx wrangler dev --remote
zawa
zawaOP9mo ago
Sorry, I was able to execute it thanks to your advice. However, I've encountered a new error as follows:
[ERROR] Error on remote worker: APIError: A request to the Cloudflare API (/accounts/[ACCOUNT_ID]/.../edge-preview) failed.
...
...
...
notes: [
{
text: 'workers.api.error.no_access_to_browser_worker [code: 10088]'
}
],
location: undefined,
kind: 'error',
code: 10088
[ERROR] Error on remote worker: APIError: A request to the Cloudflare API (/accounts/[ACCOUNT_ID]/.../edge-preview) failed.
...
...
...
notes: [
{
text: 'workers.api.error.no_access_to_browser_worker [code: 10088]'
}
],
location: undefined,
kind: 'error',
code: 10088
Chaika
Chaika9mo ago
ouch, do you have Workers Paid?
zawa
zawaOP9mo ago
no.. Ah, so a subscription to the paid plan is necessary to use it. Thank you for clarifying. I had mistakenly thought it was available within the free tier. I greatly appreciate your assistance with this matter. You're a lifesaver. Thank you.
Chaika
Chaika9mo ago
yea it is sorry, at least for this beta period/where they're not billing anyway. Not sure if they plan on eventually bringing it to free plan, I don't think they've said.
0xCC
0xCC7mo ago
Thanks for the information.
Want results from more Discord servers?
Add your server