Bug 221879 – Class not recognized in AudioWorklet when module is imported in two different ways

• Component: Web Audio
• Status: RESOLVED DUPLICATE

[Jeff Kaufman]

I have an AudioWorklet with:

    class AudioChunk { ... }

    function thaw_audio_chunk(o) {
      return new AudioChunk(...)
    }

This is fine in Firefox and Chrome, but in Safari it throws:

    ReferenceError: Can't find variable: AudioChunk
    thaw_audio_chunk@https://www.jefftk.com/test/safari-audio-worklet-error2/audio-worklet.js:126:24
    handle_message@https://www.jefftk.com/test/safari-audio-worklet-error2/audio-worklet.js:669:33
    @https://www.jefftk.com/test/safari-audio-worklet-error2/audio-worklet.js:521:30
    try_do@https://www.jefftk.com/test/safari-audio-worklet-error2/audio-worklet.js:544:15
    @https://www.jefftk.com/test/safari-audio-worklet-error2/audio-worklet.js:520:20

Here is a standalone version that reproduces the bug reliably on my machine: https://www.jefftk.com/test/safari-audio-worklet-error2/  After pressing "start", giving mic permission, and waiting a few seconds you should see "This app has crashed. We're really sorry :-(" and that stack trace.

Part of why it happens is that I am loading the worklet script two different ways:

   audio-worklet.js:
     if (typeof AudioWorkletProcessor === "undefined") {
       // do nothing
     } else {
       class AudioChunk { ... }
       ...
     }
 
   app.js
     import './audio-worklet.js';
     ...
     await this.audioCtx.audioWorklet.addModule('audio-worklet.js');
     ...

This is a hack that I started doing because it got me better error messages in Chrome.  Removing it is sufficient to stop triggering the bug in Safari: https://www.jefftk.com/test/safari-audio-worklet-error3/

Something else is also necessary to trigger it, however, because when I tried to make a very simple version that replicated this situation did not trigger it: https://www.jefftk.com/test/worklet-invoker  This prints "success" in Firefox, Chrome, and Safari, and does not throw.

This was easy to work around once I figured it out, since I can stop doing the silly load-it-both-ways thing, but I wanted to report it in case having the repro is useful.

[Radar WebKit Bug Importer]

<rdar://problem/74575943>

[Alexey Shvayka]

Please note that both

```
    function thaw_audio_chunk(o) {
      return new AudioChunk(...)
    }
```

and the `class AudioChunk` it references are defined inside `else {` block, which subjects the function to have incorrect scope of the global environment. The root cause of it was broken Annex B function hoisting implementation, which was fixed in https://commits.webkit.org/268553@main

*** This bug has been marked as a duplicate of bug 163209 ***

[Alexey Shvayka]

(In reply to Jeff Kaufman from comment #0)
> This was easy to work around once I figured it out, since I can stop doing
> the silly load-it-both-ways thing, but I wanted to report it in case having
> the repro is useful.

Thank you Jeff for filing this bug along with easy-to-follow repro, that's highly appreciated!!