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 https://github.com/ffmpegwasm/ffmpeg.wasm/issues/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:

https://github.com/dmnsgn/canvas-record/blob/ae483c1a5e291fa100219a3c8c742c5777d24c11/example/index.js#L195

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

https://github.com/dmnsgn/canvas-record/blob/5cfaa80e5a32248eef8689a082f2daaa73fecc7a/src/Recorder.js#L175-L191