Imported worker doesn't work with vite

[Lee-ERP]

Trying to change our application from native AudioContext to this library and the addModule function fails with :

SyntaxError: Unexpected token 'export'

I suspect this has something to do with the way Vite wraps up the import statement, not being compatible with the way in which this library wraps the workers.

At this line: https://github.com/chrisguttandin/standardized-audio-context/blob/master/src/factories/add-audio-worklet-module.ts#L221 the wrappedSource variable contains

"import \"http://localhost:5174/node_modules/.pnpm/vite@5.2.9/node_modules/vite/dist/client/env.mjs\";((AudioWorkletProcessor,registerProcessor)=>{export default class AudioBufferProcessor extends AudioWorkletProcessor {\n  #bufferSize;\n  // Used to reduce port messaging\n  #buffer;\n  #bytesWritten;\n  constructor(options) {\n    super();\n    const { processorOptions } = options ?? {};\n    const { bufferSize } = processorOptions ?? {};\n    this.#bufferSize = bufferSize || 2048;\n    this.#buffer = new Float32Array(this.#bufferSize);\n    this.#bytesWritten = 0;\n  }\n  process(inputs, outputs) {\n    if (inputs?.length && inputs[0]?.length) {\n      const input = inputs[0][0];\n      this.#appendToBuffer(input);\n    }\n    return true;\n  }\n  #appendToBuffer(data) {\n    const isBufferFull = this.#bytesWritten === this.#bufferSize;\n    if (isBufferFull)\n      this.#flush();\n    for (let i = 0; i < data.length; i++) {\n      this.#buffer[this.#bytesWritten++] = data[i];\n    }\n  }\n  #flush() {\n    const bufferData = this.#bytesWritten < this.#bufferSize ? this.#buffer.slice(0, this.#bytesWritten) : this.#buffer;\n    this.port.postMessage(bufferData);\n    this.#bytesWritten = 0;\n  }\n}\nregisterProcessor(\"audio-buffer-processor\", AudioBufferProcessor);\n\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IjtBQUVBLHFCQUFxQiw2QkFBNkIsc0JBQXNCO0FBQUEsRUFDcEU7QUFBQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFFQSxZQUFZLFNBQWtDO0FBQzVDLFVBQU07QUFFTixVQUFNLEVBQUUsaUJBQWlCLElBQUksV0FBVyxDQUFDO0FBQ3pDLFVBQU0sRUFBRSxXQUFXLElBQUksb0JBQW9CLENBQUM7QUFFNUMsU0FBSyxjQUFjLGNBQWM7QUFDakMsU0FBSyxVQUFVLElBQUksYUFBYSxLQUFLLFdBQVc7QUFDaEQsU0FBSyxnQkFBZ0I7QUFBQSxFQUN2QjtBQUFBLEVBRUEsUUFBUSxRQUEwQixTQUEyQjtBQUMzRCxRQUFJLFFBQVEsVUFBVSxPQUFPLENBQUMsR0FBRyxRQUFRO0FBQ3ZDLFlBQU0sUUFBUSxPQUFPLENBQUMsRUFBRSxDQUFDO0FBQ3pCLFdBQUssZ0JBQWdCLEtBQUs7QUFBQSxJQUM1QjtBQUNBLFdBQU87QUFBQSxFQUNUO0FBQUEsRUFFQSxnQkFBZ0IsTUFBb0I7QUFDbEMsVUFBTSxlQUFlLEtBQUssa0JBQWtCLEtBQUs7QUFDakQsUUFBSTtBQUFjLFdBQUssT0FBTztBQUU5QixhQUFTLElBQUksR0FBRyxJQUFJLEtBQUssUUFBUSxLQUFLO0FBQ3BDLFdBQUssUUFBUyxLQUFLLGVBQWUsSUFBSSxLQUFLLENBQUM7QUFBQSxJQUM5QztBQUFBLEVBQ0Y7QUFBQSxFQUVBLFNBQVM7QUFFUCxVQUFNLGFBQ0osS0FBSyxnQkFBZ0IsS0FBSyxjQUN0QixLQUFLLFFBQVMsTUFBTSxHQUFHLEtBQUssYUFBYSxJQUN6QyxLQUFLO0FBQ1gsU0FBSyxLQUFLLFlBQVksVUFBVTtBQUNoQyxTQUFLLGdCQUFnQjtBQUFBLEVBQ3ZCO0FBQ0Y7QUFFQSxrQkFBa0IsMEJBQTBCLG9CQUFvQiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOlsid29ya2xldC50cz93b3JrZXJfZmlsZSZ0eXBlPW1vZHVsZSJdLCJzb3VyY2VzQ29udGVudCI6WyJcbi8vIFB1c2ggdGhlIGF1ZGlvIGRhdGEgb250byBhIHNtYWxsIGJ1ZmZlciBhbmQgZmx1c2ggaXQgd2hlbiBmdWxsXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBBdWRpb0J1ZmZlclByb2Nlc3NvciBleHRlbmRzIEF1ZGlvV29ya2xldFByb2Nlc3NvciB7XG4gICAgI2J1ZmZlclNpemU6IG51bWJlcjsgLy8gVXNlZCB0byByZWR1Y2UgcG9ydCBtZXNzYWdpbmdcbiAgICAjYnVmZmVyOiBGbG9hdDMyQXJyYXkgfCBudWxsO1xuICAgICNieXRlc1dyaXR0ZW46IG51bWJlcjtcblxuICAgIGNvbnN0cnVjdG9yKG9wdGlvbnM6IEF1ZGlvV29ya2xldE5vZGVPcHRpb25zKSB7XG4gICAgICBzdXBlcigpO1xuXG4gICAgICBjb25zdCB7IHByb2Nlc3Nvck9wdGlvbnMgfSA9IG9wdGlvbnMgPz8ge307XG4gICAgICBjb25zdCB7IGJ1ZmZlclNpemUgfSA9IHByb2Nlc3Nvck9wdGlvbnMgPz8ge307XG5cbiAgICAgIHRoaXMuI2J1ZmZlclNpemUgPSBidWZmZXJTaXplIHx8IDIwNDg7XG4gICAgICB0aGlzLiNidWZmZXIgPSBuZXcgRmxvYXQzMkFycmF5KHRoaXMuI2J1ZmZlclNpemUpO1xuICAgICAgdGhpcy4jYnl0ZXNXcml0dGVuID0gMDtcbiAgICB9XG5cbiAgICBwcm9jZXNzKGlucHV0czogRmxvYXQzMkFycmF5W11bXSwgb3V0cHV0czogRmxvYXQzMkFycmF5W11bXSkge1xuICAgICAgaWYgKGlucHV0cz8ubGVuZ3RoICYmIGlucHV0c1swXT8ubGVuZ3RoKSB7XG4gICAgICAgIGNvbnN0IGlucHV0ID0gaW5wdXRzWzBdWzBdO1xuICAgICAgICB0aGlzLiNhcHBlbmRUb0J1ZmZlcihpbnB1dCk7XG4gICAgICB9XG4gICAgICByZXR1cm4gdHJ1ZTtcbiAgICB9XG5cbiAgICAjYXBwZW5kVG9CdWZmZXIoZGF0YTogRmxvYXQzMkFycmF5KSB7XG4gICAgICBjb25zdCBpc0J1ZmZlckZ1bGwgPSB0aGlzLiNieXRlc1dyaXR0ZW4gPT09IHRoaXMuI2J1ZmZlclNpemU7XG4gICAgICBpZiAoaXNCdWZmZXJGdWxsKSB0aGlzLiNmbHVzaCgpO1xuXG4gICAgICBmb3IgKGxldCBpID0gMDsgaSA8IGRhdGEubGVuZ3RoOyBpKyspIHtcbiAgICAgICAgdGhpcy4jYnVmZmVyIVt0aGlzLiNieXRlc1dyaXR0ZW4rK10gPSBkYXRhW2ldO1xuICAgICAgfVxuICAgIH1cblxuICAgICNmbHVzaCgpIHtcbiAgICAgIC8vIFJldHVybiB0aGUgYnVmZmVyLCB0cmltbWluZyBpdCBpZiBmbHVzaCB3YXMgY2FsbGVkIGJlZm9yZSB0aGUgYnVmZmVyIHdhcyBmdWxsIChvdGhlcndpc2UgeW91J2xsIGdldCBvbGQgYnVmZmVyZWQgZGF0YSBvbiB0aGUgZW5kKVxuICAgICAgY29uc3QgYnVmZmVyRGF0YSA9XG4gICAgICAgIHRoaXMuI2J5dGVzV3JpdHRlbiA8IHRoaXMuI2J1ZmZlclNpemVcbiAgICAgICAgICA/IHRoaXMuI2J1ZmZlciEuc2xpY2UoMCwgdGhpcy4jYnl0ZXNXcml0dGVuKVxuICAgICAgICAgIDogdGhpcy4jYnVmZmVyO1xuICAgICAgdGhpcy5wb3J0LnBvc3RNZXNzYWdlKGJ1ZmZlckRhdGEpO1xuICAgICAgdGhpcy4jYnl0ZXNXcml0dGVuID0gMDtcbiAgICB9XG4gIH1cblxuICByZWdpc3RlclByb2Nlc3NvcignYXVkaW8tYnVmZmVyLXByb2Nlc3NvcicsIEF1ZGlvQnVmZmVyUHJvY2Vzc29yKTtcbiJdLCJmaWxlIjoiL1VzZXJzL2xlZS9EZXZlbG9wZXIvQXVyaXMvYXVkaW8tdGVzdC9zcmMvd29ya2xldC50cyJ9\n})(AudioWorkletProcessor,(n,p)=>registerProcessor(n,class extends p{process(i,o,p){return super.process(i.map(j=>j.some(k=>k.length===0)?[]:j),o,p)}}));registerProcessor('__sac2',class extends AudioWorkletProcessor{process(){return !1}})"

And the url variable is "blob:http://localhost:5174/1ecba6a7-f38a-4f15-8971-dd4ddce38fb7"

But i'm out of my depth on this one so i'm hoping someone familiar with how this library works will know why this doesn't work, and maybe how to fix it.

My fallback solution is to try and transpile the worker module separately to the rest of the app and import it via plain URL, but if imports with Vite could be made to work, that would be better.

I have created a minimal reproduction case here, open console log and click a button. Note how the native one doesn't throw an error.

https://stackblitz.com/edit/vitejs-vite-wxnz95?file=src%2Fworklet.ts

[chrisguttandin]

Thanks a lot for reporting this and many thanks for the easy to reproduce test case.

As you already figured out the problem is caused by the unexpected export statement. The import statements are split (https://github.com/chrisguttandin/standardized-audio-context/blob/master/src/helpers/split-import-statements.ts) when loading an AudioWorklet and the rest of the file is wrapped in a function to patch the AudioWorkletProcessor. The function which does that doesn't expect an export statement.

I'm not sure if it's a good idea to handle the export statement. I'm not even sure if it would be possible to do it in a proper way.

The test case can be fixed by removing the export statement. Is there a specific reason for adding it?

https://stackblitz.com/edit/vitejs-vite-hjr5as?file=src%2Fworklet.ts

[Lee-ERP]

You're right, removing export does appear to work, and I guess it's not required because I'm not importing the class to my consuming file, I'm importing a reference to the file. That's what you get for blindly sticking to conventions! (in my defence, I wrote my first line of TypeScript about a 1 week ago).

Thank you for spending the time to look at it and share a fix, I can't believe I spent 2 days on that.

And thank you even more for sharing this library. Ignoring this (very self-created) issue it took no more than an hour to go from only working on Chrome, to working on everything I tested it on.

[chrisguttandin]

That's great. Thanks for letting me know.