search

esphome / esp-web-tools

Open source tools to allow working with ESP devices in the browser
https://esphome.github.io/esp-web-tools/
Apache License 2.0
428 stars 118 forks source link

React import #172

Closed MAWoodMain closed 2 years ago

MAWoodMain commented 2 years ago

Not really an issue, more of a question, does anyone know how to import and use this module as a react component. I installed the NPM package and imported the module in my App.js using import 'esp-web-tools'

Then added to my Apps render JSX `<esp-web-install-button manifest="/esp/manifest.json"

`

This does appear to create the install button and when you click it you do get a webusb com port selection window but after selecting a port I get the following errors in the browser console:

reactive-element.ts:1077 Uncaught TypeError: Cannot read properties of undefined (reading 'has') at EwtInstallDialog.requestUpdate (reactive-element.ts:1077:1) at EwtInstallDialog.set [as _state] (reactive-element.ts:630:1) at new EwtInstallDialog (install-dialog.js:32:1) at HTMLDocument.createElement (:1:1536) at Module.connect (connect.js:24:1) requestUpdate @ reactive-element.ts:1077 set @ reactive-element.ts:630 EwtInstallDialog @ install-dialog.js:32 (anonymous) @ VM4356:1 connect @ connect.js:24 await in connect (async) (anonymous) @ install-button.js:23 install-dialog.js:605 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'readable') at EwtInstallDialog._initialize (install-dialog.js:605:1) at new ReactiveElement (reactive-element.ts:829:1) at new LitElement (lit-element.ts:87:1) at new EwtInstallDialog (install-dialog.js:30:1) at HTMLDocument.createElement (:1:1536) at Module.connect (connect.js:24:1)

I found I can use the module if I statically import it in the index.html file and remove the NPM package entirely but this is not really how react modules are meant to be used.

balloob commented 2 years ago

Web Component support in React is only available behind an experimental flag. Besides that, it could also be the way you bundle or transpile your code.

balloob commented 2 years ago

Closing this as this is not an issue in esp-web-tools.

ZanzyTHEbar commented 1 year ago

Right, so you state matter of factlly that this can be done - but offer no guidance. So, i am asking for guidance. I have a react project and i would like to use this package - how do i do so? What steps are involved beyond adding the package?

balloob commented 1 year ago

Visit a React forum for guidance on React projects.