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

EaBengaluru 0
Viewed 124

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

enter image description here

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 !!!

ffmpeg npm vue.js build
2 Answers

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.

asselin0

When i tried to install i've got dependencies conflict:

Dependencies conflicts

so as it's an old Vue project start by updating them

When i read the boilerplate Vue project: Boilerplate Ffmpeg

i saw their version is "@ffmpeg/ffmpeg": "^0.11.5",

I think you mixed both and used it in the core instead: ffmpeg/core

What you have to do:

  1. the core version should be: 0.11.0
  2. @ffmpeg/ffmpeg should be ^0.11.5

And after updating all of these i could get the build working perfectly:

Build Working

Here you have the package.json i have if the issue persist that means you have a problem with how you are using something but not the dependencies

  ...
  "dependencies": {
    "@ffmpeg/core": "^0.11.0",
    "@ffmpeg/ffmpeg": "^0.11.5",
    "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"
  ]
Sayf-Eddine0
Related