CF Worker Puppeeter: Cannot read properties of undefined (reading 'fetch')

Hi I'm getting this error still after following the Docs https://developers.cloudflare.com/browser-rendering/get-started/screenshots/

It happens locally with

wrangler dev --remote

wrangler dev --remote

and in production.

My

src/index.js

src/index.js

src/index.js

src/index.js:

export default {
  async fetch(request, env) {
    const { searchParams } = new URL(request.url);
    let url = searchParams.get("url");
    let img;
    if (url) {
      url = new URL(url).toString(); // normalize

        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto(url);
        img = await page.screenshot();
        // await env.BROWSER_KV_DEMO.put(url, img, {
        //   expirationTtl: 60 * 60 * 24,
        // });
        await browser.close();

      return new Response(img, {
        headers: {
          "content-type": "image/jpeg",
        },
      });
    } else {
      return new Response(
        "Please add an ?url=https://example.com/ parameter"
      );
    }
  },
};

export default {
  async fetch(request, env) {
    const { searchParams } = new URL(request.url);
    let url = searchParams.get("url");
    let img;
    if (url) {
      url = new URL(url).toString(); // normalize

        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto(url);
        img = await page.screenshot();
        // await env.BROWSER_KV_DEMO.put(url, img, {
        //   expirationTtl: 60 * 60 * 24,
        // });
        await browser.close();

      return new Response(img, {
        headers: {
          "content-type": "image/jpeg",
        },
      });
    } else {
      return new Response(
        "Please add an ?url=https://example.com/ parameter"
      );
    }
  },
};

export default {
  async fetch(request, env) {
    const { searchParams } = new URL(request.url);
    let url = searchParams.get("url");
    let img;
    if (url) {
      url = new URL(url).toString(); // normalize

        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto(url);
        img = await page.screenshot();
        // await env.BROWSER_KV_DEMO.put(url, img, {
        //   expirationTtl: 60 * 60 * 24,
        // });
        await browser.close();

      return new Response(img, {
        headers: {
          "content-type": "image/jpeg",
        },
      });
    } else {
      return new Response(
        "Please add an ?url=https://example.com/ parameter"
      );
    }
  },
};

export default {
  async fetch(request, env) {
    const { searchParams } = new URL(request.url);
    let url = searchParams.get("url");
    let img;
    if (url) {
      url = new URL(url).toString(); // normalize

        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto(url);
        img = await page.screenshot();
        // await env.BROWSER_KV_DEMO.put(url, img, {
        //   expirationTtl: 60 * 60 * 24,
        // });
        await browser.close();

      return new Response(img, {
        headers: {
          "content-type": "image/jpeg",
        },
      });
    } else {
      return new Response(
        "Please add an ?url=https://example.com/ parameter"
      );
    }
  },
};

wrangler.toml

wrangler.toml

#:schema node_modules/wrangler/config-schema.json
name = "wppr-alerts-worker-js"
main = "src/index.js"
compatibility_date = "2024-08-15"
compatibility_flags = ["nodejs_compat"]


# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
# Docs:
# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
# Note: Use secrets to store sensitive data.
# - https://developers.cloudflare.com/workers/configuration/secrets/
# [vars]
# MY_VARIABLE = "production_value"

# Bind a headless browser instance running on Cloudflare's global network.
# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#browser-rendering
[browser]
binding = "MY_BROWSER"

#:schema node_modules/wrangler/config-schema.json
name = "wppr-alerts-worker-js"
main = "src/index.js"
compatibility_date = "2024-08-15"
compatibility_flags = ["nodejs_compat"]


# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
# Docs:
# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
# Note: Use secrets to store sensitive data.
# - https://developers.cloudflare.com/workers/configuration/secrets/
# [vars]
# MY_VARIABLE = "production_value"

# Bind a headless browser instance running on Cloudflare's global network.
# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#browser-rendering
[browser]
binding = "MY_BROWSER"

#:schema node_modules/wrangler/config-schema.json
name = "wppr-alerts-worker-js"
main = "src/index.js"
compatibility_date = "2024-08-15"
compatibility_flags = ["nodejs_compat"]


# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
# Docs:
# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
# Note: Use secrets to store sensitive data.
# - https://developers.cloudflare.com/workers/configuration/secrets/
# [vars]
# MY_VARIABLE = "production_value"

# Bind a headless browser instance running on Cloudflare's global network.
# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#browser-rendering
[browser]
binding = "MY_BROWSER"

#:schema node_modules/wrangler/config-schema.json
name = "wppr-alerts-worker-js"
main = "src/index.js"
compatibility_date = "2024-08-15"
compatibility_flags = ["nodejs_compat"]


# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
# Docs:
# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
# Note: Use secrets to store sensitive data.
# - https://developers.cloudflare.com/workers/configuration/secrets/
# [vars]
# MY_VARIABLE = "production_value"

# Bind a headless browser instance running on Cloudflare's global network.
# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#browser-rendering
[browser]
binding = "MY_BROWSER"

Cannot read properties of undefined (reading 'fetch') with Node

Cloudflare Docs

Deploy a Browser Rendering Worker | Browser Rendering docs

By following this guide, you will create a Worker that uses the Browser Rendering API to take screenshots from web pages. This is a common use case for browser automation.

paulc•8/19/24, 12:35 PM

Would suggest adding a kv binding to your wrangler.toml, uncomment the lines of code in your fetch handler, and test to see if you get the same error.

LeanKhanOP•8/19/24, 12:49 PM

thanks, but I just found out the issue. My browser binding was wrongly named

const browser = await puppeteer.launch(env.MYBROWSER);const browser = await puppeteer.launch(env.MYBROWSER); should've been const browser = await puppeteer.launch(env.MY_BROWSER);const browser = await puppeteer.launch(env.MY_BROWSER);

CF Worker Puppeeter: Cannot read properties of undefined (reading 'fetch')

Similar Threads

Similar Threads

Similar Threads