2023-03-07
3629
#react#typescript
Onuorah Bonaventure
143757
Mar 7, 2023 â‹… 12 min read

Web workers, React, and TypeScript

Onuorah Bonaventure Full-stack web developer that loves connecting brands to their customers by developing amazing, performant websites. Interested in teaching programming concepts and breaking down difficult concepts. When I'm not coding, I play chess and checkers with my friends while listening to cool Afrobeats.

Recent posts:

Why URL state matters: A guide to useSearchParams in React

Why URL state matters: A guide to useSearchParams in React

Learn about React Router’s useSearchParams Hook, and how it helps you manage state through the URL for a more resilient, user-friendly app.

John Reilly
May 20, 2025 â‹… 4 min read
Node.js 24: What's New

Node.js 24 is here: What’s new and what to expect

Discover what’s new in Node.js 24, including major features, improvements, and how to prepare your projects.

Yan Sun
May 20, 2025 â‹… 5 min read
Building An Agentic AI Workflow With Ollama And React

Building an agentic AI workflow with Ollama and React

Build agentic AI workflows with Ollama and React using local LLMs for enhanced privacy, reduced costs, and offline performance.

Andrew Baisden
May 20, 2025 â‹… 11 min read
Monorepos Vs. Polyrepos: Which One Fits Your Use Case

Monorepos vs. Polyrepos: Which one fits your use case?

Learn when to choose monorepos or polyrepos for your frontend setup by comparing coordination, dependency management, CI/CD requirements, and more.

Muhammed Ali
May 19, 2025 â‹… 4 min read
View all posts

7 Replies to "Web workers, React, and TypeScript"

  1. Hi I couldn’t make it work, and the only difference I have is that I started the project with Vite xD is it something that could affect, or should i try to re-start the project using create-react-app? thanks

    1. Hello Lenz,

      I can see that you are having difficulty using the article on vite.

      Try using it with create react app.

    2. For anyone else wondering. If you’re using Vite, you can import the workers like this:

      import CountWorker from “./longProcess/count?worker”

      then use it in your useMemo hook:

      const counter: Worker = useMemo(() => new CountWorker(), []);

  2. Have you found any way to get new Worker(new URL(“./longProcesses/count.ts”, import.meta.url)) working when testing with Jest, (via create-react-app?) Jest throws “SyntaxError: Cannot use ‘import.meta’ outside a module” no matter what I do, and I haven’t found a good solution online.

  3. At no point in this guide do you define `import.meta.url` or explain what it is. Also, how does making a browser call directly to a `.ts` even file work?

  4. I am getting following error.

    SecurityError: Failed to construct ‘Worker’: Script at ‘file:///D:/artica-repos/stoke/stoke-webapp/libs/dashboard/src/lib/components/charts/views/TableView/utils/tableDataWorker.ts’ cannot be accessed from origin ‘http://localhost:4200’.

Leave a Reply