Shared Worker does not work. even though I see it in the task manager the self.onconnect method does not fired

Question

i have a project with react, typescript , webpack 5 and just for practice reasons, i try in a custom hook to create a shared-worker and receive some mock data from it. Even though i see in browser task manager Share Worker: http://localhost:300/src_webWorkers_mySharedWorker_ts.index.js file, i cant see either from useSharedWorker.tsx file or mySharedWorker.ts file the console log messages. which means that self.onconnect method never runs, right?.

At this point I should mention that I have been able to set web worker with react, typescript , webpack 5, successfully web worker example

Any ideas how I can solve that problem (any alternative solutions or any possible shared worker improvements) and where the problem is?

// hooks/useSharedWorker.tsx file
import { useEffect, useState } from 'react';

const useSharedWorker = (): any => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const worker = new SharedWorker(new URL('../webWorkers/mySharedWorker.ts', import.meta.url));

    worker.port.onmessage = event => {
      console.log('onmessage', event.data);
      setData(event.data);
    };

    worker.port.start();

    worker.port.postMessage({ msg: 'Hi, i am useSharedWorker' });

    worker.port.onmessageerror = event => {
      console.log('onmessageerror', event.data);
    };

    return () => {
      console.log('close on unmount');
      worker.port.close();
    };
  }, []);

  return data;
};

export default useSharedWorker;

// webWorkers/mySharedWorker.ts file

function doSomething(port: MessagePort): void {
  const data = {};
  // some code ...
  port.postMessage(data);
}

self.onconnect = (e: MessageEvent): void => {
  console.log('[Worker] onconnect');
  const port = e.ports[0];
  port.onmessage = (event: MessageEvent): void => {
    const { msg } = event.data;
    console.log('[Worker] onmessage', msg);
    doSomething(port);
  };
};

Answer 1

You can inspect workers here: chrome://inspect/#workers In my case there was an type error further down the code which resulted in none of the logs before that line to print See this answer: https://stackoverflow.com/a/31079750/12234839