WebSerial Support

I am trying to use the WebSerial api and i keep getting

Property 'serial' does not exist on type 'Navigator'

Property 'serial' does not exist on type 'Navigator'

How do i use the WebSerial API with Typescript and SolidJS?

24 Replies

REEEEE•2y ago

That usually happens when the browser doesn't support the api

REEEEE•2y ago

REEEEE•2y ago

usually you can do something like

if('serial' in navigator){
navigator.serial
}

if('serial' in navigator){
navigator.serial
}

DaOfficialWizard🧙OP•2y ago

yes, this is what i have done - i am using the newest version of Edge i only get the error in VSCode - seems i do not have the types installed do you know what types i need to install for devDeps? i tried dom-serial - but that is outdated and doesn't work for the newest api

REEEEE•2y ago

mmm I don't think types need to be installed but I haven't used the serial api before

REEEEE•2y ago

you can try this one https://www.npmjs.com/package/@types/w3c-web-serial

npm

@types/w3c-web-serial

TypeScript definitions for w3c-web-serial. Latest version: 1.0.3, last published: 4 months ago. Start using @types/w3c-web-serial in your project by running npm i @types/w3c-web-serial. There are 7 other projects in the npm registry using @types/w3c-web-serial.

DaOfficialWizard🧙OP•2y ago

Typescript is throwing a fit -

DaOfficialWizard🧙OP•2y ago

this is without any types installed

REEEEE•2y ago

oh yeah I guess it might be because it's experimental try the one I sent above

DaOfficialWizard🧙OP•2y ago

will do 🙂 this one has all of the right API methods - but none of the types are exported How am i supposed to use this again? Sorry - iam still new. I've installed it -and confirmed it's api but i can't import it nor use the types in a global sense do i have to manually export the interfaces? that seems wrong ... and wouldn't work if i put the code on github

REEEEE•2y ago

mm good point, it might have been an issue on their end for not exporting

DaOfficialWizard🧙OP•2y ago

i might just have to maintain a local copy for the project xD

REEEEE•2y ago

if you add import 'w3c-web-serial' to the top of the file I think works 🤔

DaOfficialWizard🧙OP•2y ago

tried that

REEEEE•2y ago

did you reload the ts server?

DaOfficialWizard🧙OP•2y ago

yeah

REEEEE•2y ago

oof I tried it and it worked

DaOfficialWizard🧙OP•2y ago

i think maybe it might be my eslint or tsconfig file

REEEEE•2y ago

possibly

DaOfficialWizard🧙OP•2y ago

yeah, it's eslint if i do this:

// eslint-disable-next-line import/no-unresolved
import 'w3c-web-serial'

// eslint-disable-next-line import/no-unresolved
import 'w3c-web-serial'

Then ctrl + click on the file import it takes me directly to the file

REEEEE•2y ago

nice

DaOfficialWizard🧙OP•2y ago

so, clearly i need to change some setting but, its working now

const [port, setPort] = createSignal<SerialPort>()

const [port, setPort] = createSignal<SerialPort>()

That works - no erorrs, and i can see the methods and types thank you very much 🙂

REEEEE•2y ago

🎉 no problem 😄

Gaming

Programming

WebSerial Support