TypeScript error on build during quick start about twilio-video-app-react HOT 8 CLOSED

Thanks to the Twilio team for building and releasing these sample applications!

To Reproduce

1. Run npm run deploy:twilio-cli
2. Encounter error:

Creating an optimized production build...
Failed to compile.

/Users/adamf/Dev/twilio/twilio-video-app-react/src/components/MainParticipant/MainParticipant.tsx
TypeScript error in /Users/adamf/Dev/twilio/twilio-video-app-react/src/components/MainParticipant/MainParticipant.tsx(11,26):
Type 'Participant' is not assignable to type 'LocalParticipant | RemoteParticipant'.
  Type 'Participant' is not assignable to type 'RemoteParticipant'.
    Types of property 'audioTracks' are incompatible.
      Type 'Map<string, AudioTrackPublication>' is not assignable to type 'Map<string, RemoteAudioTrackPublication>'.
        Type 'AudioTrackPublication' is not assignable to type 'RemoteAudioTrackPublication'.
          Property 'isSubscribed' is missing in type 'LocalAudioTrackPublication' but required in type 'RemoteAudioTrackPublication'.  TS2322

     9 |     /* audio is disabled for this participant component because this participant's audio 
    10 |        is already being rendered in the <ParticipantStrip /> component.  */
  > 11 |     <MainParticipantInfo participant={mainParticipant}>
       |                          ^
    12 |       <ParticipantTracks participant={mainParticipant} disableAudio enableScreenShare videoPriority="high" />
    13 |     </MainParticipantInfo>
    14 |   );

Environment

• OS: macOS 10.15.3
• Browser: N/A (Chrome)
• App Version: 0.3.6
• SDK Version: twilio-cli/1.10.0 darwin-x64 node-v12.16.1
• Node.js version: 12.14.1 and 12.16.1

Additional context
Shell: zsh

First tried with yarn, then with npm -- ran into same issue at same step -- deleted node_modules between switching package managers.

same issue here

from twilio-video-app-react.

Hey everyone. Thanks for the info!

I am able to reproduce this issue when I run yarn install instead of npm install. However everything works correctly when I run npm install.

@ahmedmgh67 @osamaKu - Are you using yarn or npm to install dependencies? Does the app build correctly if you use npm?

It seems the problem has to do with the version of typescript installed. Npm will install version 3.7.5, because this is what is specified in the package-lock.json file.

Yarn ignores package-lock.json, and there is no yarn.lock file, so yarn installs a newer version of Typescript - version 3.8.3. This app hasn't yet been tested with version 3.8.3 of typescript and it seems to cause the above mentioned problems, which I'll look into this week.

If you still want to use yarn, try running the yarn import command. This will use package-lock.json to generate a yarn.lock file.

from twilio-video-app-react.

I'm glad it's working @adamfeldman! The Typescript 3.8.3 problems are something to look into - I've added a ticket to our backlog.

from twilio-video-app-react.

Same issue. Any updates from the twilio team?? @paynerc @kwhinnery @andrewryno

from twilio-video-app-react.

IN

src/components/MainParticipantInfo/MainParticipantInfo.tsx

add Participant type
interface MainParticipantInfoProps { participant: LocalParticipant | RemoteParticipant | Participant; children: React.ReactNode; }

And

src/components/ParticipantTracks/ParticipantTracks.tsx

add Participant type

interface ParticipantTracksProps { participant: LocalParticipant | RemoteParticipant | Participant; disableAudio?: boolean; enableScreenShare?: boolean; videoPriority?: Track.Priority; }

will throw another issue in

src/hooks/useScreenShareParticipant/useScreenShareParticipant.tsx

change Array type to any and parameter type to any in the find function

setScreenShareParticipant( Array.from<any>(room.participants.values()) // the screenshare participant could be the localParticipant .concat(room.localParticipant) .find((participant: any) => Array.from<TrackPublication>(participant.tracks.values()).find(track => track.trackName === 'screen') ) );

from twilio-video-app-react.

Hey everyone. Thanks for the info!

I am able to reproduce this issue when I run yarn install instead of npm install. However everything works correctly when I run npm install.

@ahmedmgh67 @osamaKu - Are you using yarn or npm to install dependencies? Does the app build correctly if you use npm?

It seems the problem has to do with the version of typescript installed. Npm will install version 3.7.5, because this is what is specified in the package-lock.json file.

Yarn ignores package-lock.json, and there is no yarn.lock file, so yarn installs a newer version of Typescript - version 3.8.3. This app hasn't yet been tested with version 3.8.3 of typescript and it seems to cause the above mentioned problems, which I'll look into this week.

If you still want to use yarn, try running the yarn import command. This will use package-lock.json to generate a yarn.lock file.

Hi @timmydoza

first I use yarn to install dependencies, I get this issue with typescript v 3.7.5, then I removed node_modules and yarn.lock, package-lock.json and tried with NPM, I get the same problem, I solved this issue as I explained above

from twilio-video-app-react.

TIL that yarn import exists. Thank you @timmydoza!

I was able to successfully build and deploy the project using the project's provided directions for npm. After doing so with npm, I was then also able to build and deploy the project by running yarn import then yarn run deploy:twilio-cli --override.

from twilio-video-app-react.

Same here. Cannot compile with identical error. Had to downgrade typescript to 3.7.5.

from twilio-video-app-react.