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/[email protected]/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"
}
}