Creo que un objeto de audio arroja un ReferenceError cuando se basa en Gatsby y realmente no sé por qué. He leído que puede deberse a Node.JS, así que supongo que la forma en que estoy creando el objeto de audio no es la correcta. La versión de desarrollo funciona completamente bien aunque. Este es el componente donde creé el objeto de audio:
const Button = value => { const [play, setPlay] = useState(false); //Switch state const switchit = () => {setPlay(!play)} //Getting track info const track = value.value const trackName = track && track.name ? track.name : null; const trackPath = track && track.publicURL ? track.publicURL : null; //Making track playable const playAudio = new Audio(trackPath) const playSound = () => { if (play === false) { playAudio.play(); switchit() setTimeout(() => { setPlay(false) }, playAudio.duration * 1000); } else {} } return ( <> <ButtonStyle onClick={playSound}>{trackName}</ButtonStyle> </> ) } export default ButtonY este es el error arrojado cuando intento construir el proyecto:
ERROR Page data from page-data.json for the failed page "/": { "componentChunkName": "component---src-pages-index-js", "path": "/", "result": { "pageContext": {} }, "staticQueryHashes": [ "3649515864", "3652344105", "63159454" ] } failed Building static HTML for pages - 3.380s ERROR #95313 Building static HTML failed for path "/" See our docs page for more info on this error: https://gatsby.dev/debug-html WebpackError: ReferenceError: Audio is not defined - index.js:15 webpack:/facusounds/src/components/Button/index.js:15:21 - index.js:22 [facusounds]/[decode-uri-component]/index.js:22:1 - index.js:25 [facusounds]/[decode-uri-component]/index.js:25:1 - index.js:31 [facusounds]/[decode-uri-component]/index.js:31:1 - index.js:30 [facusounds]/[decode-uri-component]/index.js:30:4 - index.js:41 [facusounds]/[decode-uri-component]/index.js:41:1 - static-entry.js:294 webpack:/facusounds/.cache/static-entry.js:294:22 - dev-404-page.js:15 facusounds/.cache/dev-404-page.js:15:11Gatsby está intentando acceder al objeto Audio , que solo está disponible en el lado del cliente. Deberá agregar alguna lógica condicional que verifique la disponibilidad del objeto de window global.
const [playAudio] = useState(window !== 'undefined' ? new Audio(trackPath) : null) Si necesita actualizar el objeto de Audio cuando cambia trackPath , puede usar useEffect que solo se ejecuta en el lado del cliente (por lo que no es necesario verificar la ventana):
const [playAudio, setAudio] = useState(null) useEffect(() => { setAudio(new Audio(trackPath)) }, [trackPath])