Using vite + vue: `TypeError: Cannot read from private field`

[Livijn]

Describe the bug I am receiving this error when trying to use this library:

Loading ffmpeg-core.js Uncaught (in promise) TypeError: Cannot read from private field

To Reproduce I am using a slightly modified version of https://github.com/ffmpegwasm/ffmpeg.wasm/blob/main/apps/vue-vite-app.

const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm'
const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi'

async compressVideo() {
      console.log('Loading ffmpeg-core.js');
      
      this.ffmpeg.on('log', ({ message }: LogEvent) => {
        console.log(message)
      })
      
      await this.ffmpeg.load({
        coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
        wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
        workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
      })
      
      console.log('Start transcoding');
      
      await this.ffmpeg.writeFile('test.avi', await fetchFile(videoURL))
      await this.ffmpeg.exec(['-i', 'test.avi', 'test.mp4'])
      
      console.log('Complete transcoding');
      
      const data = await this.ffmpeg.readFile('test.mp4')
      
      this.uploadFile(new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' }));
    },

Desktop (please complete the following information):

• OS: macOS 13.6.2
• Browser Chrome
• Version 121

[bchellingworth]

Getting the same error, seems to be to do with this line specifically:

ffmpeg.on('log', ({type, message}) => { console.log(type, message); });

[Livijn]

Any ideas?

[xeoshow]

I also met problem when trying vue-vite-app. I just downloaded the project from below, but got problem: ffmpeg.exec seems just can not be executed, since I added console.log before and after the line, the before log can be printed, but the after log is NOT printed.
There is NO any error info on the console. How to resolve or any bug? I am on windows 11, 64 bit.

https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vue-vite-app

the pnpm list output is:

D:\gitrepository\ffmpeg.wasm-main\apps\vue-vite-app>pnpm list
Legend: production dependency, optional only, dev only

[email protected] D:\gitrepository\ffmpeg.wasm-main\apps\vue-vite-app (PRIVATE)

dependencies:
@ffmpeg/ffmpeg 0.12.10
@ffmpeg/util 0.12.1
vue 3.4.21

devDependencies:
@rushstack/eslint-patch 1.7.2         @vue/eslint-config-prettier 9.0.0     npm-run-all 4.1.5
@tsconfig/node18 18.2.2               @vue/eslint-config-typescript 12.0.0  prettier 3.2.5
@types/node 20.11.29                  @vue/tsconfig 0.5.1                   typescript 5.3.3
@vitejs/plugin-vue 5.0.4              eslint 8.57.0                         vite 4.5.2
@vitejs/plugin-vue-jsx 3.1.0          eslint-plugin-vue 9.23.0              vue-tsc 1.8.27

The node version:

D:\gitrepository\ffmpeg.wasm-main\apps\vue-vite-app>node -v
v20.11.1

[Yoduh]

Solved using Composition API by not having ffmpeg be reactive

Changed this line in my code:

const ffmpeg = ref(new FFmpeg())

to:

const ffmpeg = new FFmpeg()

It's ok though to use shallowRef, e.g. const ffmpeg = shallowRef(new FFmpeg())

If using Options API, ffmpeg should be declared outside of the component options

const ffmpeg = new FFMpeg()
export default {
  ...
}

Then replace all instances of this.ffmpeg with just ffmpeg