support: Error: Cannot find module './Audio'

Support Question

I have entered the README example in my app and it did work but all of a sudden Im getting the following:

Uncaught     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.mod._resolveFilename (file:///Users/node_modules/next/dist/build/webpack/require-hook.js:4:1855)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (file:///Users/node_modules/@vime/react/dist/cjs/components/index.js:10:31)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (file:///Users/node_modules/@vime/react/dist/cjs/index.js:18:14)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)

Here is the component I am trying to render:

    <>
      <div>
        <select title="Video Source" id="videoSource" name="videoSource" value={selectedSource} onChange={e => setSelectedSource(e.target.value)}>
          {videoSourceOptions.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <select title="Audio Source" id="audioSource" name="audioSource" value={selectedSource} onChange={e => setSelectedSource(e.target.value)}>
          {audioSourceOptions.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <video ref={videoRef} height={HEIGHT} width={WIDTH} muted autoPlay playsInline className={tw('app_videoFeed w-full max-w-screen-lg')}/>
        <Canvas height={HEIGHT} width={WIDTH}/>

        {/* EXPERIMENTAL */}
        <Player playsinline ref={playerRef} onVmPlaybackReady={onPlaybackReady}>
          <Video poster="https://media.vimejs.com/poster.png">
            <source
              data-src="https://media.vimejs.com/720p.mp4"
              type="video/mp4"
            />
          </Video>
          <DefaultUi>
          <TapSidesToSeek />
          </DefaultUi>
        </Player>



       <span>{interimTranscript.length>40 ?(transcript.slice(-80,-40)):('')}</span>
      </div>
      <div>
       <span>{interimTranscript == '' ? (resetTranscript):(transcript.slice(-40))}</span>
      </div>
      <div>
        {downloadLink && <video src={downloadLink} controls></video>}
        {downloadLink && (
          <a href={downloadLink} download="file.mp4">
            Descargar
          </a>
        )}
      </div>

      <div>
        {error && <p>{error.message}</p>}
      </div>
      <div>
        {isRecording ? (
            <Button className={tw(`border-red-600 border-opacity-100 rounded px-4 py-2`)} onClick={stopRecording}>Stop Recording</Button>
          ) : (
            <Button className={tw(`border bg-red-700 rounded px-4 text-white py-2`)} onClick={startRecording} >Record</Button>
          )}
      </div>
      <div>
        {transcribing ? (
            <Button className={tw(`border-red-600 border-opacity-100 rounded px-4 py-2`)} onClick={stopCaptioning}>Stop Captioning</Button>
          ) : (
            <Button className={tw(`border bg-yellow-700 rounded px-4 text-white py-2`)} onClick={startCaptioning} >Start Captioning</Button>
          )}
      </div>
      <div>
     </div>
    </>

And the function is still empty:

const playerRef = useRef<null | HTMLVmPlayerElement>(null);
const onPlaybackReady = () => {
};

  // If you prefer hooks :)
const [currentTime] = usePlayerContext(playerRef, 'currentTime', 0);

useEffect(() => {
  console.log(currentTime);
}, [currentTime]);

Any help will be much appreciated!

[dayvista]

+1 for experiencing this on Next.js (12.0.2, fresh install).

Here is my React component:

import { Player, Video as VideoFrame } from '@vime/react'
import '@vime/core/themes/default.css'

type VideoProps = { src: string; thumbnail?: string }
const Video = ({ src, thumbnail }: VideoProps) => {
	return (
		<Player controls>
			<VideoFrame crossOrigin="" {...(thumbnail ? { poster: thumbnail } : {})}>
				<source data-src={src} type="video/mp4" />
			</VideoFrame>
		</Player>
	)
}

export default Video

[shchekoldin]

Thanks for the clarification. I’m using Next.js at the moment. Will try to prepare an example. P.S.: Version 5.0.31 works just fine 🤔