valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix FFmpeg WASM bundler error: use runtime import instead of static analysis

Browse Source 
The @ffmpeg/ffmpeg package has internal dynamic imports that Turbopack
cannot statically analyze, but they work fine at runtime. This change
moves the import to the loadFFmpeg function where it's needed, allowing
Turbopack to skip static analysis and let the bundler resolve it at runtime.

Fixes: Cannot find module as expression is too dynamic error

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Sebastian Krüger
2026-02-25 20:27:53 +01:00
parent b5812c97b4
commit 3a8b409d1d
1 changed files with 14 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
lib/media/wasm/wasmLoader.ts
View File

@@ -1,22 +1,10 @@
import type { FFmpeg as FFmpegType } from '@ffmpeg/ffmpeg'; // Suppress Turbopack bundler warning for FFmpeg's dynamic imports
import { initializeImageMagick } from '@imagemagick/magick-wasm'; // The @ffmpeg/ffmpeg package internally uses dynamic imports that Turbopack
// flags as "too dynamic" but still work at runtime
declare const globalThis: any;
import type { ConverterEngine, WASMModuleState } from '@/types/media'; import type { ConverterEngine, WASMModuleState } from '@/types/media';
import { initializeImageMagick } from '@imagemagick/magick-wasm';
// Dynamically require FFmpeg to avoid bundler issues
let FFmpeg: any = null;
// Initialize FFmpeg at module load time
async function initFFmpeg() {
if (!FFmpeg) {
try {
const module = await import('@ffmpeg/ffmpeg');
FFmpeg = module.FFmpeg;
} catch (error) {
console.error('[FFmpeg] Failed to import module:', error);
}
}
return FFmpeg;
}
/** /**
* WASM module loading state * WASM module loading state
@@ -29,26 +17,28 @@ const moduleState: WASMModuleState = {
/** /**
* Cached WASM instances * Cached WASM instances
*/ */
let ffmpegInstance: FFmpegType | null = null; let ffmpegInstance: any = null;
let imagemagickInstance: any = null; let imagemagickInstance: any = null;
/** /**
* Load FFmpeg WASM module * Load FFmpeg WASM module
*/ */
export async function loadFFmpeg(): Promise<FFmpegType> { export async function loadFFmpeg(): Promise<any> {
if (ffmpegInstance && moduleState.ffmpeg) { if (ffmpegInstance && moduleState.ffmpeg) {
return ffmpegInstance; return ffmpegInstance;
} }
try { try {
// Initialize FFmpeg class if not already done // Import FFmpeg at runtime to avoid static bundler analysis
const FFmpegClass = await initFFmpeg(); // The @ffmpeg/ffmpeg package has internal dynamic imports that
// Turbopack cannot statically analyze, but they work fine at runtime
const { FFmpeg } = await import('@ffmpeg/ffmpeg');
if (!FFmpegClass) { if (!FFmpeg) {
throw new Error('FFmpeg class not available'); throw new Error('FFmpeg class not available');
} }
ffmpegInstance = new FFmpegClass(); ffmpegInstance = new FFmpeg();
if (!ffmpegInstance) { if (!ffmpegInstance) {
throw new Error('Failed to create FFmpeg instance'); throw new Error('Failed to create FFmpeg instance');