Onuorah Bonaventure
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:

Developing Web Extensions With Wxt

Developing web extensions with the WXT library

Browser extensions are an important part of the web ecosystem. They make our lives easier and enhance our web browsing […]

Debjyoti Banerjee
May 24, 2024 ⋅ 8 min read
Bulma Css Adoption Guide: Overview, Examples, And Alternatives

Bulma CSS adoption guide: Overview, examples, and alternatives

Explore how Bulma CSS simplifies frontend development with its ease of use and customizable, responsive, pre-designed UI elements.

Timonwa Akintokun
May 23, 2024 ⋅ 10 min read
Using Mountaineer To Develop A React App With Python

Using Mountaineer to develop a React app with Python

Develop a React app with Python using the Mountaineer framework for building a simple app with integrated your frontend and backend database.

Rosario De Chiara
May 23, 2024 ⋅ 7 min read
Enhance CSS View Transitions With Velevette

Enhance CSS view transitions with Velvette

Velvette is a utility library developed to make working with view transitions easier.

David Omotayo
May 22, 2024 ⋅ 9 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