Multiple issues with vanilla JS project

[IronWarrior]

Error occurs when running npm run download.

Error: TAR_BAD_ARCHIVE: Unrecognized archive format                                                                                   
    at Unpack.warn (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\lib\warn-mixin.js:21:40)                                     
    at Unpack.warn (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\lib\unpack.js:236:18)                                        
    at Unpack.<anonymous> (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\lib\parse.js:83:14)                                   
    at Unpack.emit (node:events:530:35)                                                                                               
    at [emit] (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\lib\parse.js:313:12)                                              
    at [maybeEnd] (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\lib\parse.js:468:17)                                          
    at [consumeChunk] (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\lib\parse.js:500:21)                                      
    at Unpack.write (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\lib\parse.js:427:25)                                        
    at Unpack.end (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\lib\parse.js:548:14)                                          
    at Pipe.end (S:\Documents\OpenSource\ffmpeg.wasm\node_modules\tar\node_modules\fs-minipass\node_modules\minipass\index.js:75:17) {
  recoverable: false,                                                                                                                 
  file: 'core-mt-0.12.10.tgz',                                                                                                        
  cwd: 'S:/Documents/OpenSource/ffmpeg.wasm/apps/vanilla-app/public/assets/core-mt',                                                  
  code: 'TAR_BAD_ARCHIVE',                                                                                                            
  tarCode: 'TAR_BAD_ARCHIVE'                                                                                                          
}

When investigating, I found I wasn't able to locate a version 0.12.10 for core-mt, making me thing it's the root error. Swapping it to 0.12.9 does resolve this, however when running the project and loading it in Chrome I get the following errors.

Uncaught ReferenceError: exports is not defined
    at index.js:1:728
    at index.js:1:2954
    at index.js:1:197
    at index.js:1:201Understand this errorAI
transcode.html:13 Uncaught ReferenceError: FFmpegUtil is not defined
    at transcode.html:13:29

The former pointing to, in util...index.js.

   Object.defineProperty(exports, "__esModule", {
        value: !0
    }),

[sugoidesune]

me too, i didnt manage to use the vite project either...

[rina-rgb]

@IronWarrior The issue seems to come from using the UMD version, which were more common in older setups (UMD builds rely on global variables like exports or FFmpegUtil)
Try switching to ESM builds and load them with type="module", and update umd to esm. That way the browser knows how to handle imports correctly.

Old

<script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script src="/assets/util/package/dist/umd/index.js"></script>
<script>
  const { fetchFile } = FFmpegUtil;
  const { FFmpeg } = FFmpegWASM;
  // ....
 coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js",
</script> 

New

<script type="module">
  import { FFmpeg } from "/assets/ffmpeg/package/dist/esm/index.js"; 
  import { fetchFile } from "/assets/util/package/dist/esm/index.js";
  // ....
 coreURL: "/assets/core/package/dist/esm/ffmpeg-core.js",
</script>

[rina-rgb]

me too, i didnt manage to use the vite project either...

@sugoidesune Are you building with react-vite? I think the issue is with core-mt version mismatched.
Could be related to this PR #832.

In the mean time a quick fix could be changing this line in App.tsx

From
const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.10/dist/esm";

To
const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.9/dist/esm";

[IronWarrior]

@IronWarrior The issue seems to come from using the UMD version, which were more common in older setups (UMD builds rely on global variables like exports or FFmpegUtil) Try switching to ESM builds and load them with type="module", and update umd to esm. That way the browser knows how to handle imports correctly.

Excellent, worked perfectly. Thanks very much for your help!

[rina-rgb]

Update: Version 0.12.10 of core-mt has been published. You can now use it!

[Skyline-23]

Hi I faced new issue using 0.12.10 of core-mt

[Error] ReferenceError: Can't find variable: exports
	(anonymous function) (index.js:1:736)
	(anonymous function) (index.js:1:2955)
	(anonymous function) (index.js:1:199)
	Global Code (index.js:1:202)
[Error] ReferenceError: Can't find variable: FFmpegUtil
	Global Code (background.js:2)

background.js

const { FFmpeg } = FFmpegWASM;
const { fetchFile } = FFmpegUtil;

let ffmpeg = new FFmpeg();
(async () => {
    ffmpeg.on('log', ({ message }) => {
        messageRef.current.innerHTML = message;
        console.log(message);
    });
    
    await ffmpeg.load({
        coreURL: browser.runtime.getURL('ffmpeg-core.js'),
        wasmURL: browser.runtime.getURL('ffmpeg.wasm'),
    });
    
    console.log('■ [Background] FFmpeg loaded');
})();

And it's my code. I can use only umd files cause of it's browser extension, so I need to new solution replacing with esm.

manifast V3

    "background": {
        "scripts": [
            "index.js", // part of util/dist/umd
            "ffmpeg.js", // part of ffmpeg/dist/umd
            "background.js" // main background worker
        ]
    },