Module not found: Can't resolve 'twilio-video'

[andyfangaf]

• [ x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [ x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [ x] I verified that the Quickstart application works in my environment.
• [ x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

import React, { useEffect, useRef } from 'react'
import { connect } from 'twilio-video'

export default function() {
    const videoEl = useRef()

    useEffect(() => {}, [])

    connect(
        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.eyJqdGkiOiJTSzJhOTI1NmZhYzE2ZjNjZGY3MmJlNDdiNzI0ZjZlZjVjLTE1ODY3NzU2MzYiLCJpc3MiOiJTSzJhOTI1NmZhYzE2ZjNjZGY3MmJlNDdiNzI0ZjZlZjVjIiwic3ViIjoiQUM1MWFlYzlhZjM0ZTE5NzlmM2M3ZjdlOTc5NzBiNzQ4MCIsImV4cCI6MTU4Njc3OTIzNiwiZ3JhbnRzIjp7ImlkZW50aXR5IjoiVGVzdCIsInZpZGVvIjp7fX19.kSnekr5NX7DokYebhoYZj7AJlswL-ZjJa6iOod1c3yc',
        { name: 'room-name' }
    ).then(room => {
        console.log(`Connected to Room ${room.name}`)

        room.participants.forEach(participantConnected)
        room.on('participantConnected', participantConnected)

        room.on('participantDisconnected', participantDisconnected)
        room.once('disconnected', error => {
            console.error(error)
            room.participants.forEach(participantDisconnected)
        })
    })

    return (
        <div>
            <div ref={videoEl}></div>
        </div>
    )
}

function participantConnected(participant) {
    console.log('Participant "%s" connected', participant.identity)

    const div = document.createElement('div')

    div.id = participant.sid
    div.innerText = participant.identity

    participant.on('trackSubscribed', track => trackSubscribed(div, track))
    participant.on('trackUnsubscribed', trackUnsubscribed)

    participant.tracks.forEach(publication => {
        if (publication.isSubscribed) {
            trackSubscribed(div, publication.track)
        }
    })

    document.body.appendChild(div)
}

function participantDisconnected(participant) {
    console.log('Participant "%s" disconnected', participant.identity)
    document.getElementById(participant.sid).remove()
}

function trackSubscribed(div, track) {
    div.appendChild(track.attach())
}

function trackUnsubscribed(track) {
    track.detach().forEach(element => element.remove())
}

Expected behavior:

Can import the module, as the code is straightforward.

TODO

Actual behavior:

I get this error:

nextjs            | [ wait ]  compiling ...
nextjs            | [ error ] ./pages/call/index.tsx
nextjs            | Module not found: Can't resolve 'twilio-video' in '/app/pages/call'
nextjs            | ModuleNotFoundError: Module not found: Error: Can't resolve 'twilio-video' in '/app/pages/call'
nextjs            |     at /app/node_modules/next/node_modules/webpack/lib/Compilation.js:925:10
nextjs            |     at /app/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:401:22
nextjs            |     at /app/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:130:21
nextjs            |     at /app/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:224:22
nextjs            |     at /app/node_modules/neo-async/async.js:2830:7
nextjs            |     at /app/node_modules/neo-async/async.js:6877:13
nextjs            |     at /app/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:214:25
nextjs            |     at /app/node_modules/enhanced-resolve/lib/Resolver.js:213:14
nextjs            |     at /app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
nextjs            |     at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
nextjs            |     at /app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
nextjs            |     at /app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
nextjs            |     at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
nextjs            |     at /app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
nextjs            |     at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
nextjs            |     at /app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43

TODO

Software versions:

• [ x] Browser(s): Chrome
• [x ] Operating System: Catalina
• [ x] twilio-video.js: 2.3.0
• [ x] Third-party libraries (e.g., Angular, React, etc.): React, Typescript, Next.js Static Rendering

[timmydoza]

Thanks for the issue @fandy!

The code you provided looks ok. I am able to reproduce the same error when I try to run the code without twilio-video installed. Could you please confirm that you have installed twilio-video?

npm i -S twilio-video

[andyfangaf]

Hi @timmydoza , yes I have twilio-video installed, which is why it was confusing me. 🤔

[timmydoza]

Would you mind confirming that twilio-video is installed in the correct location? The package.json of your next.js app should have it listed:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.3.5",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "twilio-video": "^2.3.0"
  }
}

I'm only asking because I get an error that is identical to the one you posted when I run npm run dev after uninstalling twilio-video.

[andyfangaf]

Yes my package.json has twilio-video@^2.3.0 as a dependency and @types/twilio-video@^2.0.12 as a dev dependency.

[timmydoza]

Unfortunately, I'm unable to reproduce your issue with twilio-video installed.

I'm not sure what to suggest without more information. It is possible for you to provide a full reproducible example? It could be a link to a github repo, or even a next.js project on codesandbox.io. It would be helpful if we could see the entire codebase, so we could look at things like directory structure and config files. Also, could you please let us know what version of node and npm (or yarn) you are using?

Thanks for the info!

[anasappsaya]

I got the same error when I installed @types/twilio-video, Once I removed @types/twilio-video I don't get this error. But I need @types/twilio-video when developing so I need to re-install it when dev and remove when I run the project to test. it is a little bit confusing.

[manjeshbhargav]

Hi @anasappsaya ,

I think your issue should be fixed if you install @types/twilio-video as a dependency instead of a dev dependency, like we do in our React-based Collaboration App.

Thanks,

Manjesh Malavalli JSDK Team

[deefour]

@manjeshbhargav I have the same issue as @anasappsaya and others.

Primarily a vue-cli application. It doesn't matter if I put @types/twilio-video as a dependency or devDependency, the outcome is the same - "can't resolve 'twilio-video' module in ...".

This is a newly added dependency to a 3 year old TypeScript project. I'm not sure where I'm going wrong, but I don't have issues with the 10+ other @types/... modules I have to install to devDependencies.