Webpack: transform code in web workers within the public directory

Currently, I am utilizing Next.js for my project which incorporates webpack 5 to compile TypeScript code.

Within my public folder, there are several web worker scripts located at path "/workers/**/*.worker.js".

I am curious if it is possible to write these scripts in TypeScript or at least transpile them using Babel for compatibility with older browsers.

It is worth mentioning that anything within the "public" folder is served as a file and can be accessed like a CDN.

Is it feasible to create a "workers" folder within my project and load these scripts into the public path using webpack and Next.js?

javascriptwebpacknext.jsweb-workerwebpack-5

Answer №1

Big thanks to @nalin-ranjan for helping me find the perfect solution!

I made a crucial addition in my "next.config.js" file by incorporating a new rule into my webpack configuration:

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.worker\.ts$/,
      type: 'asset/resource',
      generator: {
        filename: 'static/[hash:5].[name].js',
      },
      use: [
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            configFile: __dirname + '/worker.tsconfig.json',
          },
        },
      ],
    })
    return config
  },
}

By implementing this new rule, I was able to seamlessly import and utilize my workers as URLs while efficiently transpiling typescript.

Additionally, I had to introduce a custom "tsconfig" file that disabled the "isolatedModules" option since web workers are not considered modules. To work around next.js limitations on modifying isolatedModules settings, I created an identical tsconfig file like next.js but with isolatedModules explicitly turned off. This adjustment was essential to bypass next.js restrictions and maintain control over the isolatedModules setting.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting AngularJS $setPristine to work with the controller as syntax?

When using $scope, $setPristine works fine, but when using 'controller as syntax' it doesn't seem to have the same effect In View: <h2>With Controller as syntax</h2> <div ng-controller="FirstCtrl as first"> <form n ...

javascriptangularjsforms

Is it advisable to alter the prototype of String in JavaScript?

As I was in the process of creating a trim function in JavaScript, I decided to do some research before reinventing the wheel. After a quick Google search, I stumbled upon this helpful link: The solution provided on the website is as follows: String.prot ...

javascriptprototype

JavaScript OOP Function call not functioning in IE9

When using IE9, a JavaScript OOP Function call does not seem to work for me. Here is my code snippet: var newobj = new SAObject(); <input onclick="newobj.function()" /> Upon clicking the button, nothing happens. No alert is displayed, and it seem ...

javascriptoopinternet-explorer-9

Is there a tutorial for JavaScript with Selenium WebDriver?

I've recently embarked on the journey of writing tests with Selenium WebDriver and JavaScript. However, I'm facing a roadblock in finding a comprehensive tutorial that covers element locators, commands, verification commands for elements, clickin ...

javascriptselenium-webdriver

What issues could potentially arise from utilizing the MIME type application/json?

I'm currently developing a web service that needs to return JSON data. After doing some research, I found recommendations to use application/json. However, I am concerned about potential issues this may cause. Will older browsers like IE6+, Firefox, ...

javascriptjsoncross-browsercontent-typemime-types

React - utilize a variable as the value for an HTML element and update it whenever the variable undergoes a change

I'm on a mission to accomplish the following tasks: 1.) Initialize a variable called X with some text content. 2.) Render an HTML paragraph element that displays the text from variable X. 3.) Include an HTML Input field for users to modify the content ...

javascripthtmlreactjs

The `res.download(filepath)` function seems to be failing to initiate a download request on the user's

I'm currently working on a project involving image compression using node and react. The issue I'm facing is that when the server sends the image to the client using res.download(filepath), the download doesn't trigger on the client side. Ho ...

javascriptnode.jsexpressdownloadclient

React -- What is causing this line to append instead of add?

Instead of seeking a different solution to the problem, I am interested in understanding why defining an integer still causes it to concatenate with .map as if it were a string. The data retrieved from an API is quite basic: "data":["8" ...

javascriptreactjs

Toggle visibility of div elements in a list

Users have the option to either download a file by clicking on "download" or view it as a PNG in their browser by clicking "open". I found a solution on this platform for creating a show/hide toggle function. It worked well for one item, but I'm look ...

javascripthtmljquerycsstoggle

Can you explain the distinction between canvas.width and canvas.clientWidth for me?

I've been diving into three.js and came across an interesting example. The developer starts by creating a canvas element and then connects the renderer to that specific canvas. <canvas id="c"> </canvas> const renderer = new TH ...

javascriptdomcanvasthree.js

Is there a way to showcase the newly added state object on the page without having to reload the page?

I am currently showcasing the attributes (recipe title, image URL) of items from a state. These items originate from mongodb. Below is my current code flow: Create an empty array state variable named initialRecipes using const [initialRecipes, setRecipes] ...

javascripthtmlcssnode.jsreactjs

The React application is experiencing difficulty in rendering SVG images exclusively on Windows operating systems

My react app runs smoothly on OSX, but encounters issues on Windows due to SVG files: Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file type. <svg xmlns="http://www.w3.org/2000/svg" viewBox="..."> I ...

javascriptreactjswebpack

What could be the reason behind the button's lack of color change with this particular code?

I'm a beginner in web development and currently practicing HTML, CSS, and Javascript. I've added a button to my html file and would like the color of the button to change when it's clicked on. Here is my HTML code: <button id="box&q ...

javascripthtmlcss

Give a discount to each object in an array based on whichever object has the highest paid value in the loop

In my array of objects, each object has a key paid. I am looking to apply a discount to all objects except for the one with the highest paid value using a loop. var booking = [ {id:1,paid:200,currency:'USD'}, {id:2,paid:99,currency:'USD&apos ...

javascriptreactjsarraysloopsobject

The functionality of Angular binding seems to be experiencing some issues

Just starting out with angular and trying to figure things out. I've made an HTML page where the user can input text into a textbox, and whatever is entered should simultaneously appear on the screen. Here is the HTML code snippet: <html ng-app&g ...

javascripthtmlangularjs

Transforming a decimal number into binary base 2 manually in Javascript without using pre-defined functions

As a newcomer to coding and Javascript, I have been given an assignment that requires me to convert base 10 numbers to binary without using specific built-in methods in Javascript (such as alert(a.toString(16))). The constraints are that I can only use loo ...

javascriptarraysfunctionloopsfor-loop

Enhancing JavaScript form validation techniques

I am currently working on a user profile form that includes 15 text fields, dropdown menus, and a textarea. Users can input information into these fields, and upon saving the form, not all fields are required to be filled out. However, I need to validate a ...

javascriptjqueryajaxdjangovalidation

Stop the div underneath from scrolling on iOS Safari

I have a div that has a height of 100%, equivalent to 70% of the viewport height, with an overflow:scroll property. Now I would like to add an overlaying div that touch devices can use to scroll the entire page instead of just the div. I attempted to cre ...

javascriptjqueryioscssmobile-safari

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

javascriptjquerycsscookiesdocument-body

Exploring methods to target the window.location.pathname in Next.js

Is there a way to specify the window.location.pathname in NEXT.JS? I am encountering an error message in my code when using this snippet with next.js const isAdminPath = window.location.pathname.startsWith("/adminpath"); ...

javascriptreactjsnext.js