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

[nicolasguasca1]

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!

[augus-zz]

+1

[shchekoldin]

I have the same problem and most likely it is related to this commit: https://github.com/vime-js/vime/commit/1e8f386a46df47e7bcef408ceb5e116ca9a513e8 (chore: migrate to lerna).

components folder was moved, but index.ts points to the old location: https://github.com/vime-js/vime/blob/main/packages/react/src/index.ts

[mihar-22]

Really strange I need a reproduction that I can test. The components/ directory is auto-generated at build-time, that's why it's missing in GitHub explorer. You can see it exists here.

Generally looking at this error I'm assuming whatever you're bundling with is not checking .jsx extensions?

If Rollup -> https://github.com/rollup/plugins/tree/master/packages/node-resolve#extensions If Webpack -> https://webpack.js.org/configuration/resolve/#resolveextensions

[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 🤔

[magicspon]

Any news on this one?

[shchekoldin]

I've tried different Webpack configurations, gave up and stick with the 5.0.31.

Here is a reproduction (basic Next.js setup + vime): https://github.com/shchekoldin/next-vime-issues-231

Steps:

• Clone the repo
• npm install
• npm run dev
• Open http://localhost:3000
• You should see Error: Cannot find module './Audio' error

BTW, looks like it doesn't work for Next.js SSR mode only.

[lazaronixon]

Solved for me....

webpack.config.js

resolve: {
  extensions: [".jsx", ".js", ".json", ".wasm"],
  ...
},

[marcomiduri]

@lazaronixon I am getting the same issue as @shchekoldin on my Next.js project and can't do anything now for several weeks. Can you please provide full webpack.config.js file and next.config.js file? Now, I have only this code in next.config.js

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  }
};

[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

[lovepeacefineapple]

if you don't need to load vime.js by server side. you can solve like this

import  dynamic from "next/dynamic";
const VideoPlayer = dynamic<VideoPlayerProps>(
() => import("./vime").then((module) => module.VideoPlayer), { ssr: false }
);

[jtas01]

Still having the same problem with "next": "^12.0.8", "react": "^17.0.2", "@vime/core": "^5.0.31", "@vime/react": "^5.0.31",

Tried 5.0.31 as [shchekoldin] said this version was working, but it's also not working

[deadcoder0904]

any plans on fixing this? having the same issue & doesn't work with adding:

resolve: {
    extensions: ['.jsx', '.js', '.json', '.wasm'],
},

[gaurishhs]

Same happened with me, This helped me: https://github.com/vime-js/vime/issues/109#issuecomment-1001207601

[TyperGuy]

To day i had the same porblem and this is how i solved it :

1 - I crieted a component Called VideoPlayer that just implement and export de Vimeo video component. It will help me to change the video component more ease whenever i need.

2 - I imported my VideoPlayer component using the Nextjs's Dynamic import.

1. VideoPlayer component :

2. Importing VideoPlayer Component using Nextjs´s Dynamic import :