svelte demo broke

[stylehouse]

Describe the bug

On page load, node says this a lot:

(node:14) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
1:55:24 AM [vite] Error when evaluating SSR module /src/lib/FFmpegDemo.svelte: failed to import "@ffmpeg/util"
|- /app/node_modules/@ffmpeg/util/dist/esm/index.js:1
import { ERROR_RESPONSE_BODY_READER, ERROR_INCOMPLETED_DOWNLOAD, } from "./errors.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:345:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:294:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

I do have type:module as it says.
Has this ever come up before?

To Reproduce
clone this repo, cd apps/sveltekit-app, and:

time podman run -v .:/app:exec -p 9001:5000 --rm -it --name cos3 cos npm run dev -- --port 5000 --host 0.0.0.0

Browse (http error 500)

Expected behavior
A clear and concise demo.

Desktop (please complete the following information):

• OS: debian 12 (stable)
• Browser chromium
• Version 122.0.6261.111

Additional context
I'm trying to build a thing with this that had this problem too. I feel like something in this commit fixed it? stylehouse/bitzliten@a02faa8
Sorry for not knowing more esm|umd|teenage-javascript-

While you're at it maybe you could look at that too... The next problem I have now is why the worker seems to say
"Error: failed to import ffmpeg-core.js" during await ffmpeg.load(...), but I have no idea how to debug that. Is there another devtools per worker?

Also this page has a broken link to the svelte demo: https://ffmpegwasm.netlify.app/docs/getting-started/examples

Also I would expect to be able to easily compile an ffmpeg.wasm myself and omit features I don't need. I see this down the end of https://ffmpegwasm.netlify.app/docs/faq but it looks pretty nuts.

[boboshan]

Same here.

A solution is to comment out this line import { fetchFile, toBlobURL } from '@ffmpeg/util'; and write the functions by your own.

However, when you solve this one, there will be another error when you try to use ffmpeg.load().

Uncaught ReferenceError: document is not defined.

Struggling for a moment, I found you should use the other adapter instead of adapter-auto, otherwise, you could downgrade the Vite version to 4 from 5.

I'm really frustrated, why does an example not work out of box...

[DreamTexX]

facing the same issue

[kiliangui]

I can't get it to work either... i have tried many versions but sadly, nothing seems to work 👎
Is it Linux only ? I'm using ubuntu 23.10

[stylehouse]

Ah yes, if I use esm mode I can see that error:

I think vite has given @vite/client to the worker (to do HMR, error diags?), it uses the document object which doesn't exist in the worker.
Maybe I can avoid it (as long as we don't use this error diag?) in sveltekit-app/node_modules/vite/dist/client/client.mjs:

 // Error Template
+let template = () => h(...);
-const template = h(...);
 ...
 class ErrorOverlay extends HTMLElement {
         ...
+        if (typeof template == 'function') template = template()
         this.root.appendChild(template);
         codeframeRE.lastIndex = 0;
         const hasFrame = err.frame && codeframeRE.test(err.frame);

This is available in my fork of the demo: stylehouse@72bb1fb
Diff that against what you have to ensure I'm not hacking you.
Which gets you here:

We're in the worker receiving a FFMessageType.LOAD message.
Incidentally, to the right you can see I've got a non-breakpoint in Svelte's lifecycle.js from it throwing a Error: Function called outside component initialization on page load. I've fixed these before but I'm not sure why it happens to this demo.
So here's another permanent exception to ignore:

And then we get many exceptions from this call stack:

ffmpeg = await self.createFFmpegCore({
FS.staticInit();
FS.createDefaultDirectories();
FS.mkdir("/tmp");
return FS.mknod(path, mode, 0)
var errCode = FS.mayCreate(parent, name);        // this is in a try { ... }
var node = FS.lookupNode(dir, name);
return FS.lookup(parent, name)
return parent.node_ops.lookup(parent, name)
throw FS.genericErrors[44]

Error 44 is widely used, here it seems we may not mkdir /tmp, nor /home, /dev/urandom|shm, /proc, but it may not matter?
We seem to do this (fail to create 14 different /things) many times, I'm not sure how many... Perhaps 'a few dozen'
We get this in the console now:

There are two vite clients waking up first.
Incidentally, we're paused on an exception that occurs when the Worker's vite client tries to use document to reload code changes from me...
The 'FS error' at the end comes from this approximate call stack, starting in our transcode() code:

const data = await ffmpeg.readFile('test.mp4');
...
this.#worker && this.#worker.postMessage({ id, type, data }, trans);
data = readFile(_data);                  // now in the worker
const readFile = ({ path, encoding }) => 
ffmpeg.FS.readFile(path, { encoding });

So it seems you can follow messages into the worker with the debugger!
There is no test.mp4 output file in the ffmpeg.FS.readdir('/') listing.
Also can read the input file. Does this look right? Just a few dozen numbers?

Speaking of a few dozen, we seem to spawn a lot of workers:

Not sure how to get more info leading up to that Aborted().
With another input video I got this:

Again, does this look right? One moment before Aborted().

Still, this demo gets further than my original use for ffmpeg.wasm: https://github.com/stylehouse/bitzliten/commits/main/ which throws a "ReferenceError: SharedArrayBuffer is not defined", even when I've gone into chrome://flags and enabled "Experimental JavaScript shared memory features". It all seems the same though, I'm not sure why anything.

Seems to all go the same if I downgrade vite to 4.5.3 and 4.2.3

Can anyone else find their way as above? Thanks.

[WesleyBatista]

Hello everyone! I was the one happily contributing with the Svelte demo, but now very sorry for the frustration it may have caused...

@stylehouse (or anyone) could you please try the following steps:

1. clone repo & cd path/to/dir
2. npm install
3. cd apps/sveltekit-app
4. npm run dev

I have just removed my node_modules and followed from step 2 and it worked here:

Details

Note

It's important to run npm install from repo's root. My assumption is that package-lock.json is used and correct set of dependencies is installed ?? or maybe something with tsconfig.json ??

fyi, I'm using: M1; installed node with nvm; node v18.19.1; npm 10.2.4;

[stylehouse]

Aha.

I tried node 18.19 on a fresh debian:latest container and code checkout and it all goes the same.

My Error: Invalid data was invalid data: I needed fetchFile() for the input video, not toBlobURL() like the wasm bits. No idea what is going on, but the latter produces only a Uint8Array(63) as pictured above, so I DIY to avoid including @ffmpeg/util.
stylehouse@7493e13
My project can include fetchFile() from @ffmpeg/util no problem.
It is svelte@5.0.0-next.80 and vite@5.1.6
The demo is svelte@4.2.12 and vite@5.2.6

I can then get it to convert to mp4! From avi.
However I can't seem to get it to output an .opus, here's the Vue demo after I applied the vite client document avoidance hack stylehouse@72bb1fb

In Svelte demo, reading .mkv (h264+flac) writing mp4 (with "-c:v","copy" to not transcode the video track), a Could not allocate memory

So I can no longer do mp4s even? Actually this seems to just be chromium, brave can do mp4s!
But then I try to output an opus and it hangs after the first progress meter log. If I try to pause the worker it always stops on this line of wasm (after discompiling it?):

And is not burning cpu when not paused, so I suppose the job has crashed out and it's polling|waiting for more instructions. Without having a job space out like this, trying to pause the worker in devtools / Sources doesn't manage to pause anywhere.

Anyway...
Here it is working:

Not working:

Then I remember the oldest trick in the book: -strict -2 -c:a opus

So the experimental opus codec works 100% better than libopus in this case!

So maybe these are needed:
not @ffmpeg/util - stylehouse/bitzliten@5ac7344
fix vite client - stylehouse/bitzliten@2926880
Not sure how to do the vite client one as it involves hacking node_modules/...
If I recreate node_modules (losing the vite client hack) it complains about document and doesn't go.
Do they work for anyone else?

So perhaps it could detect and warn about a variety of things,
eg stylehouse@6c0c45e
and "memory out of range" -> restart your browser
and about libopus (the default for output.opus) being a problem (spacing out after a single progress message like size= 0kB time=00:00:00.00 bitrate=N/A speed=N/A )
which implies another layer of software common to all the demos...
A small UI library to do:

• wasm init asap or when jobbed
• job config schema (what is adjustable) and scrapheap (culture)
• returning that typed blob (knowing job)

But not do:

• drag and drop (is different per framework)
• <video>

Anyway,
In my project I forgot to await the call to ffmpeg.readFile, but now I can suddenly produce .mkv or .opus and it plays and everything!

Great stuff!

[nasso]

if you get the document is not defined error in overlay.ts

downgrade to Vite 5.1.6. yes, i just spent a lovely evening!

the related Vite issue seems to be vitejs/vite#16277

[stylehouse]

cheers, they fixed it in 5.2.8 stylehouse/bitzliten@85dbf74