Why would it just magically know what that is

you need to import it.

i tried importing like this

but i'm getting this cant resolve error

can you tell me from where i should import the worker?

what node version.

18

& i'm using next.js 13.4.9

do i have to install some package in order to get this working?

it has nothing to do with nextjs

it has to do with your node

also… dont do that? why are you intentionally using an old version.

hmm i dont want to upgrade to 14 atm

im worried about breaking stuff

oh let me try changing my node

i installed node 20.9

the issue is still there

i'm still facing this issue

after checking the type it created a worker, but, when I did worker.postMessage(), the message event listener doesn't listen to anything

worker-client.ts

 
import { EncoderWorkerRes } from '../types';
import { serializeAudioBuffer } from './audio-trimmer-helpers';

let worker: Worker;

if (typeof Worker !== 'undefined') {
  worker = new Worker('./worker.js');
  console.log('worker-client', worker);
} else {
  console.error('Web workers are not supported in this environment.');
}

/**
 * use worker to encode audio
 */
export default function encode(audioBuffer: AudioBuffer, type: string): Promise<Blob> {
  console.log('incode function called');

  const id = Math.random();

  return new Promise((resolve, reject) => {
    if (!worker) {
      return reject(new Error('Worker is not defined'));
    }

    const audioData = serializeAudioBuffer(audioBuffer);
    if (worker.postMessage) {
      console.log('post message is present');
      worker.postMessage({
        type,
        audioData,
        id,
      });
    }

    /**
     * Worker message event listener
     */
    const listener = ({ data }: MessageEvent<EncoderWorkerRes>) => {
      console.log('inside encode promise listener', { data });
      if (!data || data.id !== id) return;

      if (data.success) {
        resolve(data.data);
        console.log('inside encode promise resolve', { data });
      } else {
        console.log('inside encode promise reject', { data });
        reject(new Error(data.message));
      }

      worker.removeEventListener('message', listener);
    };

    worker.addEventListener('message', listener);
  });
}

worker.ts

import { EncoderWorkerReq, EncoderWorkerRes } from '../types';
import encodeAudioBufferLame from './encoder/lame';
import encodeAudioBufferWav from './encoder/wav';

const encodeMap = {
  wav: encodeAudioBufferWav,
  mp3: encodeAudioBufferLame,
};


globalThis.addEventListener('message', (e: MessageEvent<EncoderWorkerReq>) => {
  const { type, id, audioData } = e.data;
  let response: EncoderWorkerRes;

  console.log('globalThis e', { type, id, audioData, e });

  try {
    const encode = encodeMap[type];
    if (!encode) throw new Error('Unkown audio encoding');
    response = {
      id,
      success: true,
      data: encode(audioData),
    };

    
  } catch (err) {
    response = {
      id,
      success: false,
      message: err.toString(),
    };

    console.error('worker error', err);
  }

  console.log('response', response);
  postMessage(response);
});

this never works