Uncaught ReferenceError: createFFmpegCore is not defined

As you can see the

import React from "react";
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

const ffmpeg = createFFmpeg({
  log: true,
});

function App() {
  const [ready, setReady] = React.useState(false);

  const load = async () => {
    await ffmpeg.load();
    setReady(true);
  };

  React.useEffect(() => {
    load();
  }, []);

.
.
.

I got a Bad memory error too! How to fix this?

[discretegames]

I found a fix! You have to go to node_modules/@ffmpeg/core/dist/ and copy all the files from there and paste them in the root folder, preferrably in the public folder if you’re using NextJS. Then use:

const ffmpeg = createFFmpeg({
  corePath: "http://localhost:3000/public/ffmpeg-core.js",
  // Use public address
  log: true,
});

This started to work for me in NextJS when I removed the http://localhost:3000/public part. I copied the node_modules/@ffmpeg/core/dist folder into public and renamed it ffmpeg_core_dist for clarity. Then

import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
const ffmpeg = createFFmpeg({ log: true, corePath: "/ffmpeg_core_dist/ffmpeg-core.js" });

worked locally. But on production I got the error Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined which I was able to fix by adding these headers to next.config.js:

async headers() {
    return [
        {
            source: "/", // change to appropriate path
            headers: [
                {
                    key: "Cross-Origin-Embedder-Policy",
                    value: "require-corp",
                },
                {
                    key: "Cross-Origin-Opener-Policy",
                    value: "same-origin",
                },
            ],
        },
    ];
},

But this is not a perfect solution because SharedArrayBuffer is not defined still happens sometimes on page load and a reload is needed to get ffmpeg to load. Also it has other issues mentioned here. This all has to do with the security of SharedArrayBuffer that goes above my head.

[votruongan]

For anyone using react-scripts or create-react-app to run React, you can send headers manually by using a customized middleware (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually).

First, install http-proxy-middleware:

npm install http-proxy-middleware --save

or

yarn add http-proxy-middleware

Then, create src/setupProxy.js file and put our logic in there:

module.exports = function (app) {
    app.use(function (request, response, next) {
        response.setHeader("Cross-Origin-Opener-Policy", "same-origin");
        response.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
        next();
    });
};