4

I'm trying to use tone.js in a next.js react project. When I run or build i get this error "ReferenceError: AudioBuffer is not defined"

I have isolated the tone.js code in codesandbox and it's working perfectly. https://codesandbox.io/s/tonejs-react-pink-noise-generator-pfnl0?file=/src/App.js

But not in the next.js app

ReferenceError: AudioBuffer is not defined
    at ki (/node_modules/tone/build/Tone.js:1:117922)```
Shano
  • 346
  • 4
  • 15

1 Answers1

3

AudioBuffer is a web browser thing, it does not exist in node.js. The error you are getting is because the code that uses AudioBuffer can't run on the server. You need to instantiate that part of the code only in the browser. That is usually done in useEffect hook, or on the server, you can first check if window object is defined.

Ivan V.
  • 7,593
  • 2
  • 36
  • 53
  • Thanks, I've reworked my example in codesandbox above to instantiate the new Tone.Noise within the useEffect hook and assigned it to state. It's working in my next.js code now :) – Shano May 10 '21 at 19:37