fix ffmpeg,js length error in react-js project

[DeanVanGreunen]

I've tried to import the ffmpeg js library into my react-typescript project, I can't really update my project's react version or react-scripts due to the current code base.

Error

./node_modules/@ffmpeg/ffmpeg/dist/umd/ffmpeg.js
TypeError: REDACTED_PROJECT_ROOT\node_modules\@ffmpeg\ffmpeg\dist\umd\ffmpeg.js: Cannot read properties of undefined (reading 'length')

Code

import React, { useEffect, useRef, useState } from 'react';
import { FFmpeg } from '@ffmpeg/ffmpeg';

/* MORE CODE HERE */

const ffmpeg = new FFmpeg();
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
const coreURL = `${baseURL}/ffmpeg-core.js`;
const wasmURL = `${baseURL}/ffmpeg-core.wasm`;
const coreData = await fromURLToBlob(coreURL);
const wasmData = await fromURLToBlob(wasmURL);
const coreBlob = new Blob([coreData], { type: "text/javascript"});
const wasmBlob = new Blob([wasmData], { type: "application/wasm"});
await ffmpeg.load({
    coreURL: fromBlobToURL(coreBlob),
    wasmURL: fromBlobToURL(wasmBlob),
});       

/* MORE CODE HERE */

Versions

npm v8.19.4
node v16.20.2

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@ffmpeg/ffmpeg": "^0.12.10",
    "@material-ui/core": "^4.12.3",
    "@mui/base": "^5.0.0-beta.36",
    "@mui/icons-material": "^5.10.3",
    "@mui/material": "^5.15.10",
    "@mui/x-data-grid": "^6.19.2",
    "@mui/x-data-grid-pro": "^6.19.2",
    "@reduxjs/toolkit": "^1.8.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@toast-ui/editor": "^3.1.3",
    "@toast-ui/react-editor": "^3.1.3",
    "@types/jest": "^29.0.1",
    "@types/node": "^18.7.17",
    "@types/react": "^17.0.49",
    "@types/react-dom": "^18.0.6",
    "@zalando/oauth2-client-js": "^0.0.18",
    "ajv": "^8.12.0",
    "ajv-errors": "^3.0.0",
    "apexcharts": "^3.28.1",
    "arraybuffer-concat": "^0.0.1",
    "axios": "^1.4.0",
    "base64-blob": "^1.4.1",
    "bootstrap": "^5.1.1",
    "datetime-diff": "^0.2.1",
    "fuzzy-time": "^1.0.7",
    "jquery": "^3.6.0",
    "jso": "^4.1.1",
    "luxon": "^2.3.0",
    "pretty-bytes": "^5.6.0",
    "react": "^17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-beautiful-dnd": "^13.1.0",
    "react-bootstrap": "^2.0.0-rc.0",
    "react-dom": "^17.0.2",
    "react-export-excel": "^0.5.3",
    "react-facebook": "^9.0.12",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-media-recorder": "^1.6.6",
    "react-notifications": "^1.7.2",
    "react-pages": "^0.4.4",
    "react-redux": "^7.2.8",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "react-toastify": "^8.0.2",
    "react-tooltip": "^4.2.21",
    "react-webcam": "^6.0.0",
    "recharts": "^2.1.8",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "typescript": "^4.8.3",
    "web-vitals": "^1.1.2",
    "website-popup": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "set NODE_OPTIONS=--max-old-space-size=4096 && react-scripts build --GENERATE_SOURCEMAP=false",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6"
  }
}