Hey guys I’m trying to make a cool Streamdeck plugin. I got the counter example working fine on my Windows 11 PC with node 23.8 and Streamdeck 6.8.1. But now I want to add puppeteer to my project.
I tried to install it with npm install puppeteer@24 but I’m hitting a wall. The Streamdeck SDK uses rollup for bundling and it’s giving me headaches when I try to use puppeteer.
When I try to import puppeteer in my src/plugin.ts file and create a browser instance it crashes during npm run watch. Here’s a snippet of what I’m trying to do:
import {action, KeyDownEvent, SingletonAction, WillAppearEvent} from '@elgato/streamdeck';
import * as puppeteer from 'puppeteer';
async function doStuff(event: KeyDownEvent<MySettings>): Promise<void> {
const browser = await puppeteer.launch();
// Some other code here
const {settings} = event.payload;
settings.count = (settings.count || 0) + 1;
await event.action.setSettings(settings);
await event.action.setTitle(`Count: ${settings.count}`);
}
The build throws a bunch of errors about ‘this’ being undefined and something about JSON files. Any ideas how to make puppeteer play nice with the Streamdeck SDK? Thanks!
I’ve had success integrating Puppeteer with various SDKs, including Streamdeck. The key is often in the build configuration. Try adding Puppeteer as an external dependency in your rollup config. This way, it won’t try to bundle Puppeteer, which can cause conflicts.
In your rollup.config.js, add something like:
external: ['puppeteer']
Also, ensure you’re using the correct import syntax:
import puppeteer from 'puppeteer'
If issues persist, consider using a pre-built Chromium binary and specifying its path when launching Puppeteer. This can bypass some compatibility issues.
Lastly, double-check your Node.js version compatibility with both Puppeteer and the Streamdeck SDK. Sometimes, version mismatches can cause cryptic errors.
I’ve encountered similar issues when working with Puppeteer in more constrained environments. One approach that worked for me was to use a headless browser API service instead of running Puppeteer directly in the plugin. Services like Browserless or Puppeteer-as-a-service let you make HTTP requests to control a remote browser instance. This avoids the headaches of bundling Puppeteer and its dependencies.
For your use case, you could set up an external Node.js server that exposes the Puppeteer functionality you need via a simple API. Then your Streamdeck plugin just needs to make HTTP calls to that server.
It’s a bit more setup initially, but I found it much easier to maintain long-term, especially when dealing with Puppeteer version updates. Just make sure to handle network errors gracefully in your plugin code.
hey there! sounds like a cool project. have u tried using puppeteer-core instead? it’s lighter and might play nicer with rollup. also, make sure ur tsconfig.json is set up right for es modules. if that doesnt work, u could try bundling puppeteer separately and importing it as a script. goodluck!