Vite: Cannot use import statement outside a module

[user4707]

Describe the bug I'm trying to use it in a SvelteKit project. But I'm getting "Cannot use import statement outside a module" on this line:

import { toBlobURL, fetchFile } from "@ffmpeg/util"

To Reproduce

1. Install @ffmpeg/ffmpeg and @ffmpeg/util in a blank SvelteKit project.
2. In your src/routes/+page.svelte file, initialize ffmpeg.wasm:

import { onMount } from "svelte";
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { toBlobURL, fetchFile } from "@ffmpeg/util";
let loaded = false;

const ffmpeg = new FFmpeg();
ffmpeg.on("log", ({ message }) => {
  console.log(message);
});

onMount(async () => {
  const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
  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"
    ),
  });
  loaded = true;
});

Error

Cannot use import statement outside a module

...\node_modules\.pnpm\@[email protected]\node_modules\@ffmpeg\util\dist\esm\index.js:1
import { ERROR_RESPONSE_BODY_READER, ERROR_INCOMPLETED_DOWNLOAD, } from "./errors.js";
^^^^^^

Enviroment:

• OS: Windows 11
• Browser: chrome
• Node Version: v18.17.1

[ed-asriyan]

Same issue on v0.12.7. Downgrading to v0.11.6 solves the issue.

[codingstark-dev]

Same Issue!!

pnpm\@[email protected]\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:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Object.loader (D:\astro\soundcloud\node_modules\.pnpm\[email protected]\node_modules\tsm\require.js:1:1222)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)

[EnZon3]

Same issue on v0.12.7. Downgrading to v0.11.6 solves the issue.

Been getting the same issue, even after downgrading.

[stephenswetonic]

I've had the same issue, I believe I had to add this to vite.config.ts.

optimizeDeps: {
	exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
},
server: {
	headers: {
		"Cross-Origin-Opener-Policy": "same-origin",
		"Cross-Origin-Embedder-Policy": "require-corp",
	},
},

For utils, ll I needed to use was fetchFile, importing it never worked. You can look at the implementation of fetchFile and copy it or use a simplified version like this:

async function readFile(file) {
    return new Promise(resolve => {
        const fileReader = new FileReader();
        
        fileReader.onload = () => {
            const {result} = fileReader;
            if (result instanceof ArrayBuffer) {
                resolve(new Uint8Array(result));
            }
        }
        fileReader.readAsArrayBuffer(file);
    })
}

[regg00]

I can confirm it still doesn't work today with those versions:

"@ffmpeg/ffmpeg": "^0.12.10",
"@ffmpeg/util": "^0.12.1",

For anyone stuck here, this video really helped me out: https://www.youtube.com/watch?v=lHcnhSgKgyM