ReferenceError: self is not defined in Next.js pages

[jereloh]

Describe the bug When i use version 12 using page router self is not defined Import trace for requested module: ./node_modules/.pnpm/@ffmpeg+ffmpeg@0.12.6/node_modules/@ffmpeg/ffmpeg/dist/esm/worker.js ./node_modules/.pnpm/@ffmpeg+ffmpeg@0.12.6/node_modules/@ffmpeg/ffmpeg/dist/esm/classes.js ./node_modules/.pnpm/@ffmpeg+ffmpeg@0.12.6/node_modules/@ffmpeg/ffmpeg/dist/esm/index.js ⨯ ReferenceError: self is not defined at Object.<anonymous> (/Users/redacted/Documents/test-app/node_modules/.pnpm/@ffmpeg+ffmpeg@0.12.6/node_modules/@ffmpeg/ffmpeg/dist/umd/ffmpeg.js:1:202) at Module._compile (node:internal/modules/cjs/loader:1241:14) at Module._extensions..js (node:internal/modules/cjs/loader:1295:10) at Module.load (node:internal/modules/cjs/loader:1091:32) at Module._load (node:internal/modules/cjs/loader:938:12) at Module.require (node:internal/modules/cjs/loader:1115:19) at mod.require (/Users/redacted/Documents/test-app/node_modules/.pnpm/next@13.5.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:64:28) at require (node:internal/modules/helpers:130:18) at @ffmpeg/ffmpeg (/Users/redacted/Documents/test-app/.next/server/pages/index.js:76:18) at __webpack_require__ (/Users/redacted/Documents/test-app/.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///./pages/index.tsx:7:72) at ./pages/index.tsx (/Users/redacted/Documents/test-app/.next/server/pages/index.js:55:1) at __webpack_require__ (/Users/redacted/Documents/test-app/.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///./node_modules/.pnpm/next@13.5.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fpages%2Findex.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:22:74) at ./node_modules/.pnpm/next@13.5.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fpages%2Findex.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (/Users/redacted/Documents/test-app/.next/server/pages/index.js:22:1) { page: '/' }

Note that using app router - it runs well, i'm using ffmpeg.wasm in an existing project using page router therefore we are not ready to upgrade.

To Reproduce

1. npx create-next-app@latest

   • ✔ What is your project named? … test-app
   • ✔ Would you like to use TypeScript? … Yes
   • ✔ Would you like to use ESLint? … Yes
   • ✔ Would you like to use Tailwind CSS? … Yes
   • ✔ Would you like to use src/ directory? … No
   • ✔ Would you like to use App Router? (recommended) … No
   • ✔ Would you like to customize the default import alias (@/*)? … No

2. pnpm i @ffmpeg/ffmpeg @ffmpeg/util

3. copy example code from ffmpeg.wasm next.js example

4. run the app

[jereloh]

This issue is observed to be solved by changing

const ffmpegRef = useRef(new FFmpeg()) to const ffmpegRef = useRef<FFmpeg>();

const ffmpeg = ffmpegRef.current to ffmpegRef.current = new FFmpeg();