Gatsby 构建错误 #95313，音频未定义

Question

我认为在 Gatsby 上构建时音频对象会抛出 ReferenceError，我真的不知道为什么。我读过它可能是因为 Node.JS，所以我猜我创建音频对象的方式不正确。开发版本完全可以正常工作。这是我创建音频对象的组件：

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 Button

这是我尝试构建项目时抛出的错误：

 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:11

Answer 1

Gatsby 正在尝试访问 Audio 对象，该对象仅在客户端可用。您需要添加一些条件逻辑来检查全局 window 对象的可用性。

const [playAudio] = useState(window !== 'undefined' ? new Audio(trackPath) : null)

如果您需要在 trackPath 更改时更新 Audio 对象，您可以使用仅运行客户端的 useEffect（因此不需要 window 检查） :

const [playAudio, setAudio] = useState(null)

useEffect(() => {
  setAudio(new Audio(trackPath))
}, [trackPath])

Gatsby 构建错误 #95313，音频未定义

Gatsby build error #95313, Audio is not defined

javascript

referenceerror

reactjs

webpack

gatsby