- Cloudflare Developers

HHello, I’m Allie!Empty message

B

BlackForestBoi•7/11/23, 12:32 PM

When people at Cloudflare say "soon" what range are we talking about here?

Not trying to get you pinned down just for us to have a rough overview if that is days, weeks or months?

N

NicS•7/13/23, 4:39 PM

https://tenor.com/view/dfk-bloaters-defikingdoms-gif-24254004

Tenor

N

NicS•7/13/23, 4:39 PM

Hey, you got any of them Beta invites?

NNicS Hey, you got any of them Beta invites?

M

meyer•7/13/23, 4:39 PM

N

NicS•7/13/23, 4:40 PM

Thanks

A

Abhishek Mirajkar•7/14/23, 4:07 PM

Hey all,

I'm trying to implement ServerSideRendering using Puppetter in workers,
Does anyone know if this would work?

also can anyone enable beta access for my account id please ? cce05b73fe5b9a4bd24dcc4e56b28cfb
It would be nice to have your inputs

Thanks

Original message was deleted

V

Vero•7/18/23, 4:08 PM

Heyo, can you please try again?

P

Pascale•7/19/23, 6:57 PM

https://github.com/cloudflare/puppeteer/pull/15 (PDF support) broke our wrangler deployments, but it outlines: "Adds back support to page.pdf() using Cloudflare Workers Streams and Buffers support." to use node:stream and node:buffer.

Any way to make it work with wrangler deployments?

S

Shahid khan•7/19/23, 6:59 PM

Can I create genesis block in cloudflare and mine it

P

Pascale•7/19/23, 7:00 PM

right.. yeah..

Thanks a lot.

S

Shahid khan•7/19/23, 7:00 PM

Can I create genesis block in cloudflare and mine it

Original message was deleted

A

Ashley•7/20/23, 10:53 AM

I just came across this one, all the guides / blogs are I think wrong, as they all use node_compat = true in them

And I had to switch to use the compatibility_flags

A

Ashley•7/20/23, 10:54 AM

I'm trying out the browser, using a simple bit of code:

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();
await page.goto(`https://www.some-page.com`);
const html = await page.content()

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();
await page.goto(`https://www.some-page.com`);
const html = await page.content()

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();
await page.goto(`https://www.some-page.com`);
const html = await page.content()

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();
await page.goto(`https://www.some-page.com`);
const html = await page.content()

And I'm getting

Trace resource limit exceeded; subsequent logs not recorded.

Trace resource limit exceeded; subsequent logs not recorded.

Trace resource limit exceeded; subsequent logs not recorded.

Trace resource limit exceeded; subsequent logs not recorded.. I'm guessing if you're doing browser stuff, you probably need to switch your worker types to unbounded?

A

Ashley•7/20/23, 10:59 AM

Although realistically I can't see why, as it's just getting a page and returning the content, which might take a little bit to get the page but it's not CPU time, and I'd be amazed if getting the page content was taking up a lot of CPU

A

Ashley•7/20/23, 11:05 AM

Interestingly, if I load a simpler web page, it completes

A

Ashley•7/20/23, 11:16 AM

Yeah, just seen this:

Median CPU Time 51.7 ms

Median CPU Time 51.7 ms

Median CPU Time 51.7 ms

Median CPU Time 51.7 ms so will switch this one to unbound, ty!

A

Ashley•7/20/23, 11:26 AM

I'm definitely being thick, but when I go to change the worker to unbound, and agree, it says I don't have an active subscription... but I can't for the life of me work out where to enable that subscription? As under billing -> subscriptions there's no option to add any

And I can't for the life of me find it anywhere in the dashboard!

A

Ashley•7/20/23, 11:26 AM

I'm being thick, there's literally a plans item on the left menu under workers

A

Ashley•7/20/23, 10:32 PM

Not sure if a bug or I'm doing something wrong, but the following code (amended the URLs) results in

Buffer is not defined

Buffer is not defined

Buffer is not defined

Buffer is not defined, which is a bit odd (same for .text() and .json()):

const [res] = await Promise.all([
            page.waitForResponse(res => res.url().includes('something') && res.request().method().toUpperCase() != "OPTIONS"),
            page.goto('https://example.com', {waitUntil: "domcontentloaded"}),
        ]);

console.log(await res?.buffer())

const [res] = await Promise.all([
            page.waitForResponse(res => res.url().includes('something') && res.request().method().toUpperCase() != "OPTIONS"),
            page.goto('https://example.com', {waitUntil: "domcontentloaded"}),
        ]);

console.log(await res?.buffer())

const [res] = await Promise.all([
            page.waitForResponse(res => res.url().includes('something') && res.request().method().toUpperCase() != "OPTIONS"),
            page.goto('https://example.com', {waitUntil: "domcontentloaded"}),
        ]);

console.log(await res?.buffer())

const [res] = await Promise.all([
            page.waitForResponse(res => res.url().includes('something') && res.request().method().toUpperCase() != "OPTIONS"),
            page.goto('https://example.com', {waitUntil: "domcontentloaded"}),
        ]);

console.log(await res?.buffer())

Effectively I'm trying to extract data from a network request that's made during the second page load, and using

pages.on

pages.on

pages.on

pages.on was behaving very strangely so gave this a whirl instead

A

Ashley•7/20/23, 10:37 PM

(I have

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ] in my wrangler.toml)

A

Ashley•7/20/23, 10:48 PM

I feel like this is possibly some Pupetter quirk I'm not aware of, but:

page.on('response', async(response) => {
            const request = response.request();

            if (request.url().includes('something')) {
                console.log(123);
                const text = await response.text();
                console.log(text);
                console.log(456);
            }
        })

page.on('response', async(response) => {
            const request = response.request();

            if (request.url().includes('something')) {
                console.log(123);
                const text = await response.text();
                console.log(text);
                console.log(456);
            }
        })

page.on('response', async(response) => {
            const request = response.request();

            if (request.url().includes('something')) {
                console.log(123);
                const text = await response.text();
                console.log(text);
                console.log(456);
            }
        })

page.on('response', async(response) => {
            const request = response.request();

            if (request.url().includes('something')) {
                console.log(123);
                const text = await response.text();
                console.log(text);
                console.log(456);
            }
        })

It will log 123 many times, but nothing after - never the text, nor the 456. Quite confused by this one

R

robert•7/21/23, 2:07 AM

Hey folks, excited to try out this new API, any chance I could get access to the beta?

U

Unsmart•7/21/23, 2:11 AM

Check the pinned message

AAshley Not sure if a bug or I'm doing something wrong, but the following code (amended ...

A

Ashley•7/21/23, 8:27 AM

On this one, I just ran the script locally using the core Pupetter library, and it works fine

So it looks like it's a problem with the CF fork, which I figured made sense considering the error was related to a Node library not being available

A

Ashley•7/21/23, 10:30 AM

https://github.com/cloudflare/puppeteer/issues/18 raised here

S

Steambase•7/21/23, 2:18 PM

Hey all, I just wanted to share here I just started getting a similar error after switching over to

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ] in my wrangler.toml file.

A few days ago, my worker was working as expected so I suspect this was a recent CF change. For my use case, I am attempting to take a simple png screenshot of my own website:

            // Setup Headless Browser
            browser = await puppeteer.launch(env.OG_IMAGE_BROWSER);
            page = await browser.newPage();
            page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

            // Open Game Page
            await page.goto(`https://steambase.io/games/${appId}`);
            await page.waitForSelector('#app-stats-line-chart.loaded');

            // Capture Screenshot
            const img = await page.screenshot({
                type: 'png'
            });

            // Setup Headless Browser
            browser = await puppeteer.launch(env.OG_IMAGE_BROWSER);
            page = await browser.newPage();
            page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

            // Open Game Page
            await page.goto(`https://steambase.io/games/${appId}`);
            await page.waitForSelector('#app-stats-line-chart.loaded');

            // Capture Screenshot
            const img = await page.screenshot({
                type: 'png'
            });

            // Setup Headless Browser
            browser = await puppeteer.launch(env.OG_IMAGE_BROWSER);
            page = await browser.newPage();
            page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

            // Open Game Page
            await page.goto(`https://steambase.io/games/${appId}`);
            await page.waitForSelector('#app-stats-line-chart.loaded');

            // Capture Screenshot
            const img = await page.screenshot({
                type: 'png'
            });

            // Setup Headless Browser
            browser = await puppeteer.launch(env.OG_IMAGE_BROWSER);
            page = await browser.newPage();
            page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

            // Open Game Page
            await page.goto(`https://steambase.io/games/${appId}`);
            await page.waitForSelector('#app-stats-line-chart.loaded');

            // Capture Screenshot
            const img = await page.screenshot({
                type: 'png'
            });

    {
      "message": [
        "ReferenceError: Buffer is not defined"
      ],
      "level": "error",
      "timestamp": 1689948882582
    },

    {
      "message": [
        "ReferenceError: Buffer is not defined"
      ],
      "level": "error",
      "timestamp": 1689948882582
    },

    {
      "message": [
        "ReferenceError: Buffer is not defined"
      ],
      "level": "error",
      "timestamp": 1689948882582
    },

    {
      "message": [
        "ReferenceError: Buffer is not defined"
      ],
      "level": "error",
      "timestamp": 1689948882582
    },

Z

zehawk•7/21/23, 2:42 PM

I'm getting an error just following the steps here https://developers.cloudflare.com/browser-rendering/get-started/screenshots/:

node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:22:25: ERROR: Could not
  resolve "node:stream"
  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23: ERROR: Could not
  resolve "node:buffer"

node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:22:25: ERROR: Could not
  resolve "node:stream"
  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23: ERROR: Could not
  resolve "node:buffer"

node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:22:25: ERROR: Could not
  resolve "node:stream"
  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23: ERROR: Could not
  resolve "node:buffer"

node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:22:25: ERROR: Could not
  resolve "node:stream"
  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23: ERROR: Could not
  resolve "node:buffer"

What am I missing?

Z

zehawk•7/21/23, 2:46 PM

Let me try that, I already set like this:

node_compat = true
nodejs_compat = true

node_compat = true
nodejs_compat = true

node_compat = true
nodejs_compat = true

node_compat = true
nodejs_compat = true

C

Chaika•7/21/23, 2:47 PM

unless things have changed in the last week, all I needed to get browser rendering working was

node_compat = true

node_compat = true

node_compat = true

node_compat = true

and then make sure you're not testing locally (i.e wrangler 3.x defaults to local dev, use wrangler dev --remote)

the compat flag for nodejs adds some other stuff, but only under the node prefix, the node_compat setting polyfills stuff in (increasing bundle size) but globally

Z

zehawk•7/21/23, 2:47 PM

So I get:

The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file.

The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file.

The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file.

The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file.

Z

zehawk•7/21/23, 2:47 PM

Works fine with only

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

Z

zehawk•7/21/23, 2:55 PM

Now I get a

text: 'workers.api.error.no_access_to_browser_worker [code: 10088]'

text: 'workers.api.error.no_access_to_browser_worker [code: 10088]'

text: 'workers.api.error.no_access_to_browser_worker [code: 10088]'

text: 'workers.api.error.no_access_to_browser_worker [code: 10088]' I guess this is due to gating by the API beta access, correct?

Original message was deleted

C

Chaika•7/21/23, 2:59 PM

ahh I see, it looks like what zehawk said last was right, all you need now is the compat flag and not the node_compat/poly fills, PDFs working great
https://puppeter.workers.chaika.me/?url=https://cloudflare.com
In the latest version it looks like they switched from global buffer to node:buffer

Zzehawk Now I get a `text: 'workers.api.error.no_access_to_browser_worker [code: 10088]'...

C

Chaika•7/21/23, 3:00 PM

yea that's the error, looks like you already put your account id in the thread, just gotta wait for vero to enable you

S

Steambase•7/21/23, 3:38 PM

@Skye do you have an .toml example with the flags which actually worked for you? When attempting to use both flags I am unable to deploy.

My toml

name = "open-graph"
main = "src/index.ts"
compatibility_date = "2023-07-21"
compatibility_flags = [ "nodejs_compat" ]
node_compat = true
workers_dev = true

browser = { binding = "MYBROSWER", type = "browser" }

name = "open-graph"
main = "src/index.ts"
compatibility_date = "2023-07-21"
compatibility_flags = [ "nodejs_compat" ]
node_compat = true
workers_dev = true

browser = { binding = "MYBROSWER", type = "browser" }

name = "open-graph"
main = "src/index.ts"
compatibility_date = "2023-07-21"
compatibility_flags = [ "nodejs_compat" ]
node_compat = true
workers_dev = true

browser = { binding = "MYBROSWER", type = "browser" }

name = "open-graph"
main = "src/index.ts"
compatibility_date = "2023-07-21"
compatibility_flags = [ "nodejs_compat" ]
node_compat = true
workers_dev = true

browser = { binding = "MYBROSWER", type = "browser" }

Error on Deployment

 ⛅️ wrangler 3.3.0
------------------
▲ [WARNING] Enabling Node.js compatibility mode for built-ins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details.

✘ [ERROR] The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file.

 ⛅️ wrangler 3.3.0
------------------
▲ [WARNING] Enabling Node.js compatibility mode for built-ins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details.

✘ [ERROR] The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file.

 ⛅️ wrangler 3.3.0
------------------
▲ [WARNING] Enabling Node.js compatibility mode for built-ins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details.

✘ [ERROR] The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file.

 ⛅️ wrangler 3.3.0
------------------
▲ [WARNING] Enabling Node.js compatibility mode for built-ins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details.

✘ [ERROR] The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file.

From the message, it appears these flags are not able to be used together. (I could also be missing something completely obvious here)

S

Steambase•7/21/23, 3:40 PM

Yup - I am currently on

0.0.4

0.0.4

0.0.4

0.0.4. Unfortunately I am back to the initial problem at runtime

"ReferenceError: Buffer is not defined"

"ReferenceError: Buffer is not defined"

"ReferenceError: Buffer is not defined"

"ReferenceError: Buffer is not defined" when I use the compatibility flag

S

Steambase•7/21/23, 3:43 PM

Getting this when publishing via

wrangler deploy

wrangler deploy

wrangler deploy

wrangler deploy

S

Steambase•7/21/23, 3:44 PM

Also confirmed getting the same reference error locally via

wrangler dev --remote

wrangler dev --remote

ReferenceError: Buffer is not defined
    at Page._Page_screenshotTask2 (index.js:7510:64) {
  stack: ReferenceError: Buffer is not defined
    at Page._Page_screenshotTask2 (index.js:7510:64),
  message: Buffer is not defined
}

ReferenceError: Buffer is not defined
    at Page._Page_screenshotTask2 (index.js:7510:64) {
  stack: ReferenceError: Buffer is not defined
    at Page._Page_screenshotTask2 (index.js:7510:64),
  message: Buffer is not defined
}

ReferenceError: Buffer is not defined
    at Page._Page_screenshotTask2 (index.js:7510:64) {
  stack: ReferenceError: Buffer is not defined
    at Page._Page_screenshotTask2 (index.js:7510:64),
  message: Buffer is not defined
}

ReferenceError: Buffer is not defined
    at Page._Page_screenshotTask2 (index.js:7510:64) {
  stack: ReferenceError: Buffer is not defined
    at Page._Page_screenshotTask2 (index.js:7510:64),
  message: Buffer is not defined
}

Original message was deleted

S

Steambase•7/21/23, 3:55 PM

Build error when I switch to that. Unable to run locally or deploy.

✘ [ERROR] Could not resolve "node:buffer"

    node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23:
      23 │ import { Buffer } from 'node:buffer';
         ╵                        ~~~~~~~~~~~~~

  The package "node:buffer" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Build failed with 2 errors:

  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:22:25: ERROR: Could not
  resolve "node:stream"
  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23: ERROR: Could not
  resolve "node:buffer"

✘ [ERROR] Could not resolve "node:buffer"

    node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23:
      23 │ import { Buffer } from 'node:buffer';
         ╵                        ~~~~~~~~~~~~~

  The package "node:buffer" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Build failed with 2 errors:

  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:22:25: ERROR: Could not
  resolve "node:stream"
  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23: ERROR: Could not
  resolve "node:buffer"

✘ [ERROR] Could not resolve "node:buffer"

    node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23:
      23 │ import { Buffer } from 'node:buffer';
         ╵                        ~~~~~~~~~~~~~

  The package "node:buffer" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Build failed with 2 errors:

  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:22:25: ERROR: Could not
  resolve "node:stream"
  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23: ERROR: Could not
  resolve "node:buffer"

✘ [ERROR] Could not resolve "node:buffer"

    node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23:
      23 │ import { Buffer } from 'node:buffer';
         ╵                        ~~~~~~~~~~~~~

  The package "node:buffer" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Build failed with 2 errors:

  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:22:25: ERROR: Could not
  resolve "node:stream"
  node_modules/@cloudflare/puppeteer/lib/esm/puppeteer/common/util.js:23:23: ERROR: Could not
  resolve "node:buffer"

A

Ashley•7/21/23, 3:59 PM

I am having the same issues as Streambase fwiw, I had to switch to compat_flags and remove node_compat and it doesn’t let me enable both

A

Ashley•7/21/23, 3:59 PM

And I’m also on 0.0.4

Original message was deleted

S

Steambase•7/21/23, 4:05 PM

Switched back to

nodejs_compat

nodejs_compat

and updated my imports to look like this. Unfortunately I still get the same result.

import puppeteer from "@cloudflare/puppeteer";
import { Stream } from 'node:stream';
import { Buffer } from 'node:buffer';

import puppeteer from "@cloudflare/puppeteer";
import { Stream } from 'node:stream';
import { Buffer } from 'node:buffer';

import puppeteer from "@cloudflare/puppeteer";
import { Stream } from 'node:stream';
import { Buffer } from 'node:buffer';

import puppeteer from "@cloudflare/puppeteer";
import { Stream } from 'node:stream';
import { Buffer } from 'node:buffer';

Original message was deleted

C

Chaika•7/21/23, 4:17 PM

nope, looks like they're still trrying to use global buffer for screenshots

C

Chaika•7/21/23, 4:18 PM

I guess use .3 if you want screenshots with node_compat, and .4 if you want pdf with compat_flags

C

Chaika•7/21/23, 4:22 PM

it doesn't even look like a hard patch, just a matter of importing and using node:buffer rather then global. I was able to just monkeypatch it together and get it working, but I don't know anything about puppeter

C

Chaika•7/21/23, 4:27 PM

ah you're right you can, I forget you can abuse javascript so much

C

Chaika•7/21/23, 4:27 PM

doesn't even have to before import, since it only uses it when you go to screenshot

S

Steambase•7/21/23, 4:32 PM

Thanks a ton @Skye @Chaika — Confirmed that workaround gets it working again on 0.0.4

Similar Threads