TypeError: Cannot read private member from an object whose class did not declare it

Question

I'm having some issues when I use a Proxy with the puppeteer library.

This is the class definition

const puppeteer = require("puppeteer");

class CustomPage {
  static async build() {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    const customPage = new CustomPage(page);
    const superPage = new Proxy(customPage, {
      get: function (target, property) {
        //pay attention to the order between browser and page because of an issue
        return customPage[property] || browser[property] || page[property];
      }
    });
    console.log("superPage in CustomPage class definition", superPage);
    return superPage;
  }
  constructor(page) {
    this.page = page;
  }
}

module.exports = CustomPage;

And this is the error that I get when I run it

 TypeError: Cannot read private member from an object whose class did not declare it

       7 | beforeEach(async () => {
       8 |   page = await Page.build();
    >  9 |   await page.goto("localhost:3000");
         |              ^
      10 | });

Could you please help me with that?

Answer 1

Looks like goto function calls some properties that declared as private like this #someProperty. Proxies and private properties cannot work together.

Here is the issue about that: https://github.com/tc39/proposal-class-fields/issues/106

In short, you have to abandon the idea of using one of them: proxies or private properties. In your case, since private properties are part of Puppeteer, you'll have to abandon proxy. I think it can be replaced with a wrapper.

Answer 2

If anyone would prefer to not have to abandon the proxy I came up with a way that works(presumably for most cases can't speak for all).

{
  get(target, prop, receiver) {
    return (params) => {
      return target[prop](params);
    }
  }
}

Maybe this is what he meant by "some wrapper"? Not sure. It's been working for me so far.