Uncaught ReferenceError: createFFmpegCore is not defined

[ayech0x2]

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?

[NayamAmarshe]

Same issue here.

[damechen]

Same here :(

[pipriles]

Same here!

[NayamAmarshe]

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/ffmpeg-core.js",
  // Use public address
  log: true,
});

[shivamragnar]

I am facing the same issue, whether running with or without corePath. None of the above workarounds work for me. I am building a Next.js PWA. Any ideas how we can avoid this and use this supercool module?

[NayamAmarshe]

I am facing the same issue, whether running with or without corePath. None of the above workarounds work for me. I am building a Next.js PWA. Any ideas how we can avoid this and use this supercool module?

It was working when I posted the solution but not anymore :((

[Junoburger]

Did anyone find a solution for this? I guess downgrading @ffmpeg/ffmpeg to 0.9.8 and @ffmpeg/core to 0.9.0 for now is the way to go 🤷‍♂️

[KazuyaFCB]

@Junoburger I changed @ffmpeg/ffmpeg to 0.9.8 and @ffmpeg/core to 0.9.0 but I got ReferenceError: __dirname is not defined error :(

[CrypticSignal]

Try corePath: "https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js"

[martins-a]

Hello, using this versions in my package json it worked just fine:

"@ffmpeg/core": "^0.8.3",
"@ffmpeg/ffmpeg": "^0.9.4",

[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();
    });
};

[JavokhirbekTukhtasinov]

 corePath: "http://localhost:3000/ffmpeg-core.js",
``

hello sir, for many days i've been facing the same issue while working with nextjs. did u find the soulution? if u did I would be pleased if u share it with me.

[TheYass1n]

I had the same problem in React app, those version worked for me @ffmpeg/core: ^0.10.0 and @ffmpeg/ffmpeg: ^ 0.9.8

[HinnyTsang]

Same problem here with "@ffmpeg/core": "^0.10.0" and "@ffmpeg/ffmpeg": "^0.10.1"

[khantopa]

Same problem here with "@ffmpeg/core": "^0.10.0" and "@ffmpeg/ffmpeg": "^0.10.1"

[SeiwonPark]

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.

---

---

It worked for me thank you @discretegames !

My setting:

• Next.js (JavaScript)
• @ffmpeg/core==0.10.0
• @ffmpeg/ffmpeg==0.10.1

// index.jsx  (or some component .js/.jsx file)

const ffmpeg = createFFmpeg({
  corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js',
  log: true,
});

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Thank you again :)

[katinas15]

Hi, I faced the same issues and found that there is an easy to use script for SharedArrayBuffer is not defined error. I added this script https://github.com/gzuidhof/coi-serviceworker to the head and it fixed the issue on Nuxt

[jereloh]

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.

It worked for me thank you @discretegames !

My setting:

• Next.js (JavaScript)
• @ffmpeg/core==0.10.0
• @ffmpeg/ffmpeg==0.10.1

// index.jsx  (or some component .js/.jsx file)

const ffmpeg = createFFmpeg({
  corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js',
  log: true,
});

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Thank you again :)

Thank you! this works for me as well!

Just want to add that you will also be able to use version 0.11.0

Next.js (JavaScript)

• @ffmpeg/core==0.11.0
• @ffmpeg/ffmpeg==0.11.6

const ffmpeg = createFFmpeg({
        corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js',
        log: true,
      })

[jereloh]

Another solution, to utilize NextJS middle ware

create middleware.ts following: here

// eslint-disable-next-line @next/next/no-server-import-in-page
import { NextResponse } from 'next/server'
// eslint-disable-next-line @next/next/no-server-import-in-page
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers)

  //   if (request.nextUrl.pathname.startsWith('/')) { modify '/' accordingly
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  })
  response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp')
  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin')
  return response
  //   }
}

[princefishthrower]

I'm getting this while running it within a Jest unit test... so I don't have the (easy) possibility to just put it at localhost somewhere. What's the recommended way to use ffmpeg.wasm with jest?

[salivity]

can not get this to work once built on my domain but npm run dev works ok in webpack. Did anyone find out why this error is happening?

[salivity]

I've found out whats causing it but don't know how to solve, when i disabled the terser mangler in webpack the module has no problems finding the createFFmpegCore function.

[samudraraj]

I've found out whats causing it but don't know how to solve, when i disabled the terser mangler in webpack the module has no problems finding the createFFmpegCore function.

terser mangler renames the variables in a program in the form of "mangling"

you actually found the root cause of this and turning off terser is a temporary fix, but even i don't know a permanent fix for it, tho i think moving the ffmpeg-core.json file into the src directory might work

[WXperia]

Globalizing this script can solve this problem.

[Devgrammer]

Just do the simple try bring down the versions @ffmpeg/ffmpeg =>0.9.8 @ffmpeg/core =>0.8.3

now add log is true and corePath to the cdn link and now add source="/" in next.config.js and same in vite.config.js if you are using vite.

[rabia-shafqat]

headers: [ { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp', }, { key: 'Cross-Origin-Opener-Policy', value: 'same-origin', }, ],

    how to add them in simple react project?

[juanptoror]

Just do the simple try bring down the versions @ffmpeg/ffmpeg =>0.9.8 @ffmpeg/core =>0.8.3

now add log is true and corePath to the cdn link and now add source="/" in next.config.js and same in vite.config.js if you are using vite.

do u have example for vite.config.js ?

[asgomda]

For anyone using create-react-app: Remove ffmpeg and ffmpeg/core npm uninstall @ffmpeg/ffmpeg @ffmpeg/core

Run the code below to downgrade npm install @ffmpeg/[email protected] @ffmpeg/[email protected]

Then follow this to setup the headers

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();
    });
};

[asgomda]

@rabia-shafqat https://github.com/ffmpegwasm/ffmpeg.wasm/issues/262#issuecomment-1862579923