Importing into Next.js project triggers Module not found for @ffmpeg/core

[zinkkrysty]

I'm trying to use canvas-record in a Next.js application. I don't need the ffmpeg encoder as I want to use the WebCodecs instead. Despite this, I get an ugly error regarding importing of ffmpeg-core module.

error - ./node_modules/canvas-record/node_modules/@ffmpeg/ffmpeg/src/browser/defaultOptions.js:7:0
Module not found: Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'

Import trace for requested module:
./node_modules/canvas-record/node_modules/@ffmpeg/ffmpeg/src/browser/index.js
./node_modules/canvas-record/node_modules/@ffmpeg/ffmpeg/src/index.js
./node_modules/canvas-record/src/encoders/FFmpegEncoder.js
./node_modules/canvas-record/src/encoders/index.js
./node_modules/canvas-record/index.js

There is a similar issue opened at ffmpegwasm/ffmpeg.wasm#383 however I don't expect canvas-record to import any encoders until I decide to use them.

I would appreciate the possibility of using this library without automatically loading the ffmpeg module.

Consider letting the user import the encoder they need and passing it to the Recorder initialization.

[zinkkrysty]

I'm fixing this issue by overriding the webpack config in my Next.js app:

// next.config.js

const nextConfig = {
    // Solve misconfigured/missing imports from canvas-record
    webpack: (config) => {
        config.resolve.alias['/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'] =
            '/node_modules/@ffmpeg/core/dist/esm/ffmpeg-core.js';
        config.resolve.alias['fs'] = false;
        return config;
    },
}

module.exports = nextConfig;

[dmnsgn]

Hi, I am not entirely sure why Next.js would try to load it in the first place as @ffmpeg/core is not a dependency of canvas-record. Maybe a default/side effect of how @ffmpeg/ffmpeg is trying to fetch it with the corePath. I have released v5.0.0-beta.0 with updated @ffmpeg/ffmpeg, if you want to give it a go.

But in any case, you should be able to instance a new Recorder with your chosen encoder in v4 already by passing "encoder" as an option. That's what I do in the example:

canvas-record/example/index.js

Line 195 in ae483c1

encoder: CONFIG.encoder ? new Encoders[`${CONFIG.encoder}`]() : null,

It is only automatically guessing the best encoder if options.encoder (assigned as this.encoder) is not set:

canvas-record/src/Recorder.js

Lines 175 to 191 in 5cfaa80

	constructor(context, options = {}) {
	this.context = context;
	const opts = { ...Recorder.defaultOptions, ...options };
	Object.assign(this, opts);
	if (!this.encoder) {
	if (this.extension === "gif") {
	this.encoder = new GIFEncoder(opts);
	} else if (["png", "jpg"].includes(this.extension)) {
	this.encoder = new FrameEncoder(opts);
	} else {
	this.encoder = isWebCodecsSupported
	? new WebCodecsEncoder(opts)
	: new H264MP4Encoder(opts);
	}
	}