I'm getting error while building the project in vue for ffmpeg.wasm

Question

Hi i'm getting below error when i build the project with $npm run build command

I'm using vuetify "vuetify": "^2.4.0" still because 3.0 is still in beta so i'm using "vue": "^2.6.11",

Here is my package.json

{
   ....
   "dependencies": {
      "@ffmpeg/core": "^0.11.5",
      "@ffmpeg/ffmpeg": "^0.11.0",
      "core-js": "^3.6.5",
      "vue": "^2.6.11",
      "vue-router": "^3.5.3",
      "vuetify": "^2.4.0"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "~4.5.0",
      "@vue/cli-plugin-eslint": "~4.5.0",
      "@vue/cli-service": "~4.5.0",
      "babel-eslint": "^10.1.0",
      "eslint": "^6.7.2",
      "eslint-plugin-vue": "^6.2.2",
      "sass": "~1.32.0",
      "sass-loader": "^10.0.0",
      "vue-cli-plugin-vuetify": "~2.4.5",
      "vue-template-compiler": "^2.6.11",
      "vuetify-loader": "^1.7.0"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "parserOptions": {
        "parser": "babel-eslint"
      },
      "rules": {}
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead"
    ]
  }

Note: it was working fine with "@ffmpeg/ffmpeg": "^0.10.1", when i updated it to "@ffmpeg/ffmpeg": "^0.11.0", it is not working

in my vue.config.js there is nothing much , except transpileDependencies

module.exports = {
  transpileDependencies: [
    'vuetify'
  ]
}

Here is i have uploaded my project https://easyupload.io/rl9xyd [Download with high speed]

Note: i want to use vuetify

Question: i want to build with "@ffmpeg/core": "^0.11.0", "@ffmpeg/ffmpeg": "^0.11.5" and vuetify

Please help me to resolve the error thanks in advance !!!

Answer 1

The issue is that in ffmpeg 0.11, they changed how @ffmpeg/ffmpeg imports the core. This is the commit that changed it https://github.com/ffmpegwasm/ffmpeg.wasm/commit/ff9c27e3bfdfb94484502cd9d355781bdba10265. Vue 2 uses Webpack 4 which isn't compatible with this change to use import.meta.url. Webpack 5 supports it, and apparently there were loaders for Webpack 4 to work around it, but they seem to be dead now.

I think the easiest solution is to use the prebuilt version of @ffmpeg/ffmeg instead. You can change your import in App.vue from

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

to

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js';

to use the prebuilt. That makes the demo build, but the demo doesn't seem to do anything, so can't verify that it works.