react cant find ffmpegwasm

Question

I am trying to create a working example for ffmpeg wasm with react js in my browser.

I have been following this very simple example: https://www.youtube.com/watch?v=-OTc0Ki7Sv0&ab_channel=Fireship

installed ffmpeg locally inside my react repo node_modules as seen here:

And followed to tutorial video to edit the App.jsx so it looks like this:

import React, { useState, useEffect } from 'react';
import './App.css';

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({
  log: true,
});
function App() {
  
  const [ready, setReady] = useState(false);

  const load = async () => {
      console.log('load()')
      await ffmpeg.load();
      setReady(true);
  }

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

  return (
    <div className="App">
      content
    </div>
  );
}

export default App;

But this leads to error messages in my win10 command prompt terminal saying it cant find the ffmpeg files:

[16:07:47] [snowpack] [404] Not Found (/node_modules/@ffmpeg/core/dist/ffmpeg-core.js)
[16:07:47] [snowpack] [404] Not Found (/node_modules/@ffmpeg/core/dist/ffmpeg-core.wasm)
[16:07:47] [snowpack] [404] Not Found (/node_modules/@ffmpeg/core/dist/ffmpeg-core.worker.js)

I've even tried moving the ffmpeg files to my public folder and editing the code to find them like so:

const ffmpeg = createFFmpeg({
  log: true,
  corePath: '../public/@ffmpeg/core/dist/ffmpeg-core.js',
});

But the same error occured. Why doesn't my react App.jsx file correctly find the ffmpeg files in my node_modules folder?

Answer 1

Downgrade mentioned dependencies to below-given version

"dependencies": { "@ffmpeg/core": "^0.9.0", "@ffmpeg/ffmpeg": "^0.9.8", },