EncoderWorkers break when using newer versions of react-scripts/CreateReactApp

[rbracco]

Hi, first off I want to thank you for this repo. There are so few libraries/examples of how to record and convert to mp3/wav, and this one works perfectly. I was using this library previously with react-scripts 4.0.3 (part of create-react-app) but when I upgraded to react-scripts 5.0.0, the ability to import workers breaks and results in a SyntaxError: Unexpected end of input. I think the error is a result of the following function in combination with a change to react-scripts. Do you have any idea how to possibly fix this? Or what I might do as an alternative solution to be able to record audio and convert to mp3/wav? Thank you.

createWorker(fn) {
    var js = fn
      .toString()
      .replace(/^function\s*\(\)\s*{/, "")
      .replace(/}$/, "")
    var blob = new Blob([js]);
    return new Worker(URL.createObjectURL(blob));
  }

[rbracco]

I was able to solve this by altering the file structure of the web workers and changing how I imported them. Here are the changes I made in case it helps anybody else in the future

I had to make 3 changes.

1. get rid of the export default function at the top of the webworker files and just make them flat scripts
2. change this to self inside the webworkers and precede it with // eslint-disable-next-line no-restricted-globals
3. import the webworkers with in the RecorderService with this.encoderWorker = new Worker(new URL('./encoder-wav-worker.js', import.meta.url));

[kaliatech]

Thanks for your comments and notes. I'm sure it will help others.

I should probably update this repo at some point to use newer dependencies and incorporate your changes. I had originally created it to flush out web audio on iOS mostly, but even though iOS is no longer a problem, the repo continues to be useful as a way to demo/test out generic web audio functionality.