Uncaught (in promise) Error: Cannot find module as expression is too dynamic

[burnt pond]

Hi!
So i'm trying to import FFMPEG into my app on the client side (i first made it just pure Preact but moving to NextJS.
I use this code:

  const ffmpegRef = useRef<FFmpeg | null>(null);
  const messageRef = useRef<HTMLParagraphElement | null>(null);

  useEffect(() => {
    const loadFFmpeg = async () => {
      const { FFmpeg } = await import('@ffmpeg/ffmpeg');
      const { toBlobURL } = await import('@ffmpeg/util');

      const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm';
      const ffmpeg = new FFmpeg();

      ffmpeg.on('log', ({ message }) => {
        if (messageRef.current) messageRef.current.innerHTML = message;
      });

      await 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'),
      });

      ffmpegRef.current = ffmpeg;
      setLoaded(true);
    };

    loadFFmpeg();
  }, []);

But i get the error:

Uncaught (in promise) Error: Cannot find module as expression is too dynamic page.tsx:30:19
    loadFFmpeg page.tsx:30
    AsyncFunctionThrow self-hosted:804
    (Async: async)
    useEffect page.tsx:40
    react_stack_bottom_frame react-dom-client.development.js:23668

Who can help?

[tight oyster]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[lilac hinge]

Probably its cuz of await import, if its still a problem

[burnt pond]

Hi, i found a way! Gonna post it tomorrow when i'm out of bed!

[burnt pond]

Oh didnt fix it.
I atm got:

  const loadFfmpeg = async () => {
    try {
      console.log("Loading ffmpeg...");

      const baseURL =
        "https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/umd";

      const ffmpeg = new FFmpeg();

      ffmpeg.on("log", ({ message }) => {
        if (messageRef.current) {
          messageRef.current.innerHTML = message;
        }
        console.log(message);
      });

      await 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"),
      });

      ffmpegRef.current = ffmpeg;
      console.log("loaded ");
    } catch (error) {
      console.error(error);
    }
  };

When running npm run build i get the

Error occurred prerendering page "/afbeeldingen/converteer". Read more: https://nextjs.org/docs/messages/prerender-error
Error: ffmpeg.wasm does not support nodejs
    at new b (.next/server/chunks/ssr/[root-of-the-server]__a0e27f02._.js:1:122226)
    at i (.next/server/chunks/ssr/[root-of-the-server]__365f6c57._.js:1:850) {
  digest: '4143034953'
}
Export encountered an error on /afbeeldingen/converteer/page: /afbeeldingen/converteer, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
aerobytes@pop-os:~/WebstormProjects/KlikTools$ 

[lilac hinge]

It says the problem, ffmpeg.wasm doesnt support nodejs

[burnt pond]

Yeah I know. Tho i try to load ffmpeg on client side. It's get processed by nextjs and don't want that

[burnt pond]

My pure Preact frontend works fine with:

  // Load external files after page load
  setTimeout(async () => {
    const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm';
    const ffmpeg = ffmpegRef.current;

    ffmpeg.on('log', ({ message }) => {
      if (messageRef.current) messageRef.current.innerHTML = message;
    });

    await 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'),
    });
    setLoaded(true);
  }, 400);

I add it in NextJS: Get the NodeJS error.
I have "use client"; in it and still NextJS is trying to execute it/render it

[lilac hinge]

Put that block in a component, load it dynamically with dynamic import and ssr false

[burnt pond]

I now got:
/app/images/compress/page.tsx:

"use client"

import dynamic from "next/dynamic";

const CompressPage = dynamic(() => import("@/components/pages/compressPage"), { ssr: false });

export default function Page() {
  return <CompressPage />;
}

And then the compressPage:

"use client";

import { useRef, useEffect, useState } from "react";
import { toBlobURL } from "@ffmpeg/util";
import { FFmpeg } from "@ffmpeg/ffmpeg";

export default function CompressPage() {
  const ffmpegRef = useRef<FFmpeg | null>(null);
  const messageRef = useRef<HTMLDivElement>(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const loadFFmpeg = async () => {
      const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm';
      const ffmpeg = new FFmpeg();

      ffmpeg.on('log', ({ message }) => {
        if (messageRef.current) messageRef.current.innerHTML = message;
        console.log(message);
      });

      await 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'),
      });

      ffmpegRef.current = ffmpeg;
      setLoaded(true);
    };

    const timer = setTimeout(() => {
      void loadFFmpeg();
    }, 400);

    return () => clearTimeout(timer);
  }, []);

  return <div ref={messageRef}>{loaded ? "FFmpeg loaded" : "Loading FFmpeg..."}</div>;
}

But now getting again:
Uncaught (in promise) Error: Cannot find module as expression is too dynamic