How to use puppeteer in streamdeck sdk?

Question

I want to create a streamdeck plugin using Streamdeck SDK.

I created the example counter project and it works fine on Windows 11, node 23.8, Streamdeck 6.8.1.

The project is written in typescript and I wanted to add puppeteer via:

npm install puppeteer@24

Streamdeck SDK uses rollup as module bundler, and here is where I now have problems once I want to include puppeteer.

If I just want to import it and create a browser instance within my src/plugin.ts, it crashes right away on npm run watch:

import {action, KeyDownEvent, SingletonAction, WillAppearEvent} from "@elgato/streamdeck";
import * as puppeteer from "puppeteer";

    override async onKeyDown(ev: KeyDownEvent<CounterSettings>): Promise<void> {
        const browser = await puppeteer.launch(); // won't transpile, why?

        // default of example counter example

        const {settings} = ev.payload;
        settings.incrementBy ??= 1;
        settings.count = (settings.count ?? 0) + settings.incrementBy;

            await ev.action.setSettings(settings);
        await ev.action.setTitle(`${settings.count}`);
    }

On build, I get the error:

rollup v4.34.8
bundles src/plugin.ts → com.kopernikus.odoo-time-tracker.sdPlugin/bin/plugin.js...
(!) "this" has been rewritten to "undefined"
https://rollupjs.org/troubleshooting/#error-this-is-undefined
node_modules/puppeteer-core/lib/esm/puppeteer/node/ScreenRecorder.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
                            ^
7:     var useValue = arguments.length > 2;
8:     for (var i = 0; i < initializers.length; i++) {
...and 5 other occurrences
node_modules/puppeteer-core/lib/esm/puppeteer/api/ElementHandle.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
                            ^
7:     var useValue = arguments.length > 2;
8:     for (var i = 0; i < initializers.length; i++) {
...and 9 other occurrences
node_modules/puppeteer-core/lib/esm/puppeteer/api/Frame.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
                            ^
7:     var useValue = arguments.length > 2;
8:     for (var i = 0; i < initializers.length; i++) {
...and 7 other occurrences

...and 31 other files
[!] (plugin commonjs--resolver) RollupError: node_modules/escodegen/package.json (2:10): Expected ';', '}' or <eof> (Note that you need @rollup/plugin-json to import JSON files)
node_modules/escodegen/package.json (2:10)
1: {
2:     "name": "escodegen",
             ^
3:     "description": "ECMAScript code generator",
4:     "homepage": "http://github.com/estools/escodegen",
    at Object.getRollupError (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\parseAst.js:285:41)
    at ParseError.initialise (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:15580:40)
    at convertNode (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:17474:10)
    at convertProgram (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:16717:12)
    at Module.setSource (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:18454:24)
    at ModuleLoader.addModuleSource (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:21989:13)
  [cause] RollupError: Expected ';', '}' or <eof>
      at Object.getRollupError (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\parseAst.js:285:41)
      at ParseError.initialise (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:15580:40)
      at convertNode (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:17474:10)
      at convertProgram (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:16717:12)
      at Module.setSource (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:18454:24)
      at ModuleLoader.addModuleSource (C:\Users\philipp.kretzschmar\Documents\github\odoo-time-tracker\node_modules\rollup\dist\shared\rollup.js:21989:13)


watch.onEnd $ streamdeck restart com.kopernikus.odoo-time-tracker
√ Restarted com.kopernikus.odoo-time-tracker

k0pernikus · Accepted Answer · 2025-02-19 14:05:32Z

0

In your rollup.config.mjs that should exist on your project's root, you need to add your libraries as external:

const config = {
    input: "src/plugin.ts",
    output: {
        file: `${sdPlugin}/bin/plugin.js`,
        sourcemap: isWatching,
        sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => {
            return url.pathToFileURL(path.resolve(path.dirname(sourcemapPath), relativeSourcePath)).href;
        }
    },
    plugins: [
       // ...
    ],
    external: ["puppeteer"]
};

answered Feb 19 at 14:05

k0pernikus

67.6k78 gold badges245 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

k0pernikus Feb 19 at 14:06

FYI: I don't understand why I need to do this, if this is something that stems from the SDK itself, how its typescript is configured; and what it is really doing; if other know why or better solutions, please add them. I have found this approach in a different answer and it at least made this problem go away. I link that once I find it again.

Collectives™ on Stack Overflow

How to use puppeteer in streamdeck sdk?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related