Use Typescript libraries from Phoenix/Liveview application

Iam building Phoenix/LiveView application that should connect a different mobile app to this application, there is already a library written in Typescript, Iam not very frontend developer so excuse my primitive, since the library is in Typescript, I couldn’t import it to app.js so I decided to convert app.js to app.ts (I don’t know if this is the best practice for that) following this tutorial, after a while I have succeed to eliminate errors and get the file compiled, but once I initialize the constructor that create the connection instance, something went wrong behind scenes concerning LiveView because the Phoenix logs stop to appear when interacting with Liveview components like buttons

***** file app.ts *****
import {SeeraConnect} from "@seeraconnect" 
const seeraConnect = new SeeraConnect()

Once I put the constructor in comment, Phoenix LiveView logs return to work normally, so:
1- Is turning app.js to app.ts is a good practice to use Typescript libraries or there is another better way ?
2- Why Phoenix/Liveview normal behaviour gets interrupted when creating the Typescript instance ? (I verified that everything else is fine)
I will be very thankful to help me please.

It sounds more like that it’s more likely whatever SeeraConnect is is the problem. Is it adding any behaviour to buttons or forms that might conflict with LV’s behaviour?

1 Like

The library is to connect a specific mobile app to my Phoenix application, that means after setting everything perfectly a user can use this mobile application regularly by redirecting him from the browser to this app.
To keep everything simple, I have just one button “Connect” with phx-click="connect" and handling this event by doing nothing {:noreply, socket} just for testing, when I instanciate seeraConnect and click this button, the Phoenix logs stop to be shown, when I put this constructor in comment, Phoenix logs the handling of this button click, that’s what happened.