How to add a node.js API package - Puppeteer?

Developers: Plugin & API
1

I have tried importing the Puppeteer Package but what I understood is that the launcher can’t start, because it is complaining about some setter/getter methods of the Puppeteer class. What am I doing wrong?

import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, renderResults, Setting, } from 'obsidian';
import * as puppeteer from 'puppeteer';

interface HtmlToPDFSettings {
    mySetting: string;
}

const DEFAULT_SETTINGS: HtmlToPDFSettings = {

    mySetting: 'default'
}

export default class HtmlToPDF extends Plugin {
    settings: HtmlToPDFSettings;
    

    async onload() {
        await this.loadSettings();
        // This creates an icon in the left ribbon.
        const ribbonIconEl = this.addRibbonIcon('dice', 'HtmlToPDF2', (evt: MouseEvent) => {
            // Called when the user clicks the icon.
                    new AskForUrl(this.app, (result) => {
                        new Notice("Fesnter Offen "+result);
                        (async () => {
                          const browser = await puppeteer.launch({headless: false});
                          const page = await browser.newPage();
                          await page.goto(result);
                          await page.waitFor(10000);
              
                          await browser.close();
                          new Notice("Brwoser"+result);
                      })();
                      }).open();
        });

Error i get in Inspector Console:

Puppeteer.ts:187 Uncaught (in promise) TypeError: Cannot set property _preferredRevision of #<PuppeteerNode> which has only a getter
    at PuppeteerNode.get _launcher [as _launcher] (eval at <anonymous> (app.js:1), <anonymous>:22175:39)
    at PuppeteerNode.launch (eval at <anonymous> (app.js:1), <anonymous>:22162:21)
    at eval (eval at <anonymous> (app.js:1), <anonymous>:22545:43)
    at AskForUrl.eval [as onSubmit] (eval at <anonymous> (app.js:1), <anonymous>:22551:11)
    at eval (eval at <anonymous> (app.js:1), <anonymous>:22626:12)
    at HTMLButtonElement.<anonymous> (app.js:1)

What I else changes in tsconfig.json:

"module": "ESNext",
2

I tried some changes and have the feeling at least came further, without being a bit smarter.

import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, renderResults, Setting, } from 'obsidian';
const puppeteer = require('puppeteer').default;

interface HtmlToPDFSettings {
	mySetting: string;
}

const DEFAULT_SETTINGS: HtmlToPDFSettings = {

	mySetting: 'default'
}

export default class HtmlToPDF extends Plugin {
	settings: HtmlToPDFSettings;
	

	async onload() {
		await this.loadSettings();
		// This creates an icon in the left ribbon.
		const ribbonIconEl = this.addRibbonIcon('dice', 'HtmlToPDF2', (evt: MouseEvent) => {
			// Called when the user clicks the icon.
					new AskForUrl(this.app, (result) => {
						new Notice("Fesnter Offen "+result);
						async function scrapePage(url){
						  const browser = puppeteer.launch({headless: false});
						  const page = await browser.newPage();
						  await page.goto(result);
						  await page.waitFor(10000);
						  await browser.close();
						  new Notice("Brwoser"+result);
					  }
					  scrapePage(result);
					  }).open();
									
			//new Notice("Hey Hey");
		});

I have randomly tried things which i gather in my google hunt.

{
  "compilerOptions": {
    "baseUrl": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "module": "ES2020",
    "target": "ES6",
    "allowJs": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "DOM",
      "ES5",
      "ES6",
      "ES7",
      "esnext",
      "ES2020",
    ]
  },
  "include": [
    "**/*.ts"
  ],
}

I added "type": "module" in to package.json.

Now i get this as Error:

main.ts:30 Uncaught (in promise) TypeError: Cannot read property 'launch' of undefined
    at scrapePage (eval at <anonymous> (app.js:1), <anonymous>:22545:37)
    at AskForUrl.eval [as onSubmit] (eval at <anonymous> (app.js:1), <anonymous>:22552:9)
    at eval (eval at <anonymous> (app.js:1), <anonymous>:22627:12)
    at HTMLButtonElement.<anonymous> (app.js:1)
2 Likes