node-elgato-stream-deck icon indicating copy to clipboard operation
node-elgato-stream-deck copied to clipboard

Getting an "Uncaught TypeError" in minimal test project

Open LauraWebdev opened this issue 1 year ago • 1 comments

Hey there, I've setup the webhid-demo with all dependencies and was able to confirm it worked properly with my setup. Now I want to create a minimal test project to play around with the tools myself.

I've created a Vite-Vue3 project with nothing but a button for selecting the device, importing any of the @elgato-stream-deck/webhid packages fail with the same error, no matter whether I'm using JS or TS.

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at node_modules/@elgato-stream-deck/webhid/dist/device.js (device.ts:9:35)
    at __require (chunk-RSJERJUL.js?v=04683f6b:3:50)
    at node_modules/@elgato-stream-deck/webhid/dist/index.js (index.ts:2:1)
    at __require (chunk-RSJERJUL.js?v=04683f6b:3:50)
    at @elgato-stream-deck_webhid.js?v=04683f6b:5:16

Here is my App.vue for testing purposes:

<script setup>
import { requestStreamDecks, getStreamDecks } from '@elgato-stream-deck/webhid';
import { ref } from 'vue';

const device = ref(null);

const selectDevice = async () => {
    console.log("Requesting new Device");
    try {
      const devices = await requestStreamDecks();
      device.value = devices[0];
    } catch(error) {
      console.error(error);
    }
};
</script>

<template>
  <div>
    <h1>Streamdeck Test</h1>
    <button @click="selectDevice">Select Device</button>
    <div v-if="device !== null">Device loaded</div>
    <div v-else>No device loaded</div>
    <hr />
  </div>
</template>

Even with this file, I am receiving the same error:

<script setup>
import requestStreamDecks from "@elgato-stream-deck/webhid";
</script>

<template>
  <div>Test</div>
</template>

LauraWebdev avatar Mar 27 '23 19:03 LauraWebdev

The line it is failing on looks to be export class WebHIDDevice extends EventEmitter implements CoreHIDDevice { which makes some sense from the error message. The class being extended is imported with import { EventEmitter } from 'events', so it sounds like vite is not polyfilling the events nodejs api sufficiently, causing our import to fail.

I have no experience with vite, so hopefully this is something you can figure out, but the webhid demo shows it is possible to make it work with webpack. I will accept a pr to change where the EventEmitter class is imported from (I am a little surprised that I didn't make this be using https://www.npmjs.com/package/eventemitter3 already)

Julusian avatar Apr 17 '23 08:04 Julusian

This sounds like a misconfiguration, and not something that needs a change to be made here

Julusian avatar Apr 21 '24 22:04 Julusian