Here's my code, and no matter how many different variants I test, I always get the same error in react (jsx), whereas in a node (js) file it works perfectly.
Thanks in advance for your help
My code :
import React, { useState, useEffect } from 'react';import ytdl from 'ytdl-core';function App() { return (<><GetAudio urlVideo="https://www.youtube.com/watch?v=NeTQZ2pLs7k&t" /></> );}function GetAudio({urlVideo}) { const [audio, setAudio] = useState(""); useEffect(() => { const fetchAudio = async () => { try { const videoInfo = await ytdl.getInfo(urlVideo); const audioFormats = ytdl.filterFormats(videoInfo.formats, "audioonly"); setAudio(audioFormats[0].url); } catch (error) { console.error("Une erreur s'est produite :", error); setAudio(""); } }; fetchAudio(); }, [urlVideo]); return (<audio controls src={audio} /> );}export default App;
The error :
Uncaught TypeError: Class extends value undefined is not a constructor or null at node_modules/m3u8stream/dist/m3u8-parser.js (ytdl-core.js?t=1712152461068&v=8e7b307c:2716:45) at __require (chunk-Y2F7D3TJ.js?v=8e7b307c:3:50) at node_modules/m3u8stream/dist/index.js (ytdl-core.js?t=1712152461068&v=8e7b307c:3114:41) at __require (chunk-Y2F7D3TJ.js?v=8e7b307c:3:50) at node_modules/ytdl-core/lib/info-extras.js (ytdl-core.js?t=1712152461068&v=8e7b307c:3279:30) at __require (chunk-Y2F7D3TJ.js?v=8e7b307c:3:50) at node_modules/ytdl-core/lib/info.js (ytdl-core.js?t=1712152461068&v=8e7b307c:3748:18) at __require (chunk-Y2F7D3TJ.js?v=8e7b307c:3:50) at node_modules/ytdl-core/lib/index.js (ytdl-core.js?t=1712152461068&v=8e7b307c:4101:19) at __require (chunk-Y2F7D3TJ.js?v=8e7b307c:3:50)
My code is supposed to retrieve an audio file from a youtube video and link it to an audio player on the page.