I’m trying to add puppeteer to my Streamdeck plugin project. The base project works fine on Windows 11 with Node 23.8 and Streamdeck 6.8.1. I installed puppeteer using npm install puppeteer@24.
The problem starts when I try to use puppeteer in my src/plugin.ts file. 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 handleKeyPress(event) {
const browser = await puppeteer.launch();
// Other code here...
}
When I run npm run watch, it crashes with a bunch of errors. The main one seems to be about this being undefined and some issues with JSON parsing.
Has anyone successfully used puppeteer with Streamdeck SDK? Any tips on how to fix these build errors? I’m not sure if it’s a problem with rollup or if I’m missing some configuration.
hey harry, i ran into similar probs with puppeteer n streamdeck. try using puppeteer-core instead of full puppeteer. it’s lighter and might avoid those errors. also, check ur tsconfig.json to make sure it’s set up right for node. good luck with ur project!
I’ve faced similar issues when integrating Puppeteer with Streamdeck SDK. The problem likely stems from the way Puppeteer is bundled and how it interacts with the Streamdeck environment. Instead of importing Puppeteer directly, try using dynamic imports. This approach often resolves bundling conflicts.
Replace your import statement with:
const puppeteer = await import('puppeteer');
inside your async function. Also, ensure your rollup config includes Puppeteer as an external dependency. Add this to your rollup.config.js:
external: ['puppeteer']
These changes should help resolve the build errors you’re encountering. If issues persist, consider using a headless browser alternative like Playwright, which tends to play nicer with Streamdeck’s environment.
I’ve actually tackled this exact issue in one of my Streamdeck projects. The key is to use a bundler that’s compatible with both Puppeteer and Streamdeck SDK. I found that webpack works really well for this setup.
First, install webpack and its CLI:
npm install --save-dev webpack webpack-cli
Then create a webpack.config.js file in your project root with this basic configuration:
module.exports = {
target: ‘node’,
entry: ‘./src/plugin.ts’,
output: {
filename: ‘plugin.js’,
path: __dirname + ‘/dist’,
},
resolve: {
extensions: [‘.ts’, ‘.js’],
},
module: {
rules: [
{
test: /.ts$/,
use: ‘ts-loader’,
exclude: /node_modules/,
},
],
},
}
This setup should resolve most of the bundling issues you’re facing. Give it a try and let me know if you need any more help!