Build error encountered with Rollup/Vite when including GeoTiff.js and Web Worker in the project compilation

Currently, I am utilizing a Web Worker for performing calculations on a GeoTiff file. The function getRidgePoints from CalculateRidge.ts is invoked, where this function initiates a worker, sends a message to the worker, waits for a result from the worker, terminates the worker upon receiving the result, and finally returns the result. The usage of Comlink was considered, but the current approach with wrapping the worker in an "await" function has proven to work effectively.

The worker includes an addEventListener that triggers the execution of the function 

CreateRidge_Init</code, which handles the necessary calculations. This function involves loading a GeoTiff file, reading it, and conducting calculations based on the extracted values.</p>
<p>However, there seems to be an issue:</p>
<p>While attempting to build the code, an error occurs as follows:</p>
<pre><code>Error [RollupError]: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.
    at error (file:///C:/Users/ono/Documents/Programmering/solar-analysis-faroe-island/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
    . . .

Further investigation revealed that incorporating both GeoTiff.js methods (fromArrayBuffer() and .getImage()) alongside a Web Worker triggers this error:

  • Executing CreateRidge_Init directly on the main thread bypasses the Web Worker and allows successful building.
  • Omitting the use of fromArrayBuffer() and .getImage() within the Web Worker also facilitates successful building.

Despite experimenting with different build.rollupOptions settings, no changes were observed in the error during the build process. Notably, the code operates perfectly in development environments.

For reference, here are snippets from the key files involved:

import workerUrl from "src/lib/Functions/CalculateRidgeWorker?worker&url";
. . .

To address the underlying problem, adjustments may need to be made in the rollupOptions configuration to resolve the build error encountered.

typescriptviteweb-workerrollupjsgeotiff

Answer №1

After encountering an issue with the output format in the rollup options, I realized that I needed to change the format for the worker itself by utilizing the .worker option. By incorporating the following code into my vite.config.js file, I was able to resolve the error and successfully build and run my project:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import path, { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  base: "/solar-analysis-faroe-island/",
  plugins: [svelte()],

  worker: {
    format: "es"
  },

  resolve: {
    alias: {
      src: path.resolve('src/'),
    }
  },

})

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

When using setInterval, the image remains static on Safari but updates on Chrome

In my project, I am using a mock array to distribute data. One part of the project utilizes this data to display a list of cases, each with assigned images. When a case is hovered over, the images associated with that case are displayed one at a time, with ...

htmlangulartypescript

Unable to access the camera page following the installation of the camera plugin

The issue I'm encountering involves using the native camera with the capacitor camera plugin. After implementation, I am unable to open the page anymore - clicking the button that should route me to that page does nothing. I suspect the error lies wit ...

javascripttypescriptionic-frameworkionic4capacitor

The variable 'HttpEvent<name[]>' cannot be assigned to the variable 'name[]' because their types are not compatible

This is the code I have written: export interface act { id: number; name: string; } public list!: act[]; getAll(token:any): void{ this.http.get<act[]>('http://localhost:4200/test', token) .subscribe( (val) => this. ...

angulartypescriptangular-httpclient

Is there a way to exclude certain files from compilation in Typescript, but still include them for testing purposes

Organizing Files In my project, I have structured my files as follows: functions/lib/src/...src .ts files functions/lib/test/...test files functions/tsconfig.json Initially, including the test files directory in the tsconfig.json.include property a ...

typescriptjestjsts-jest

Is there a more efficient method for casting the output of Object.keys() in Typescript?

Check out this code snippet: type myType = "a" | "b" | "c"; type myMappedType = { [str in myType]: number }; const values: myMappedType = { a: 1, b: 2, c: 3 }; const keys = Object.keys as <T>(o: T) => Extract& ...

typescriptcasting

How can I transfer a selected date from a Bootstrap Datepicker in one component to another?

Currently utilizing Bootstrap in my Angular Application and the structure is organized as follows Displayed below is my Datepicker.html file <form class="form-inline"> <div class="form-group"> <div class="inpu ...

javascriptangulartypescriptdatepickerangular-ui-bootstrap

Dealing with code in Angular when transitioning to a different component

I have an Angular component that displays data and includes a button called "Go to Dashboard". I want to implement a feature where the user can either click on this button to navigate to the dashboard or have the application automatically redirect them aft ...

angulartypescript

Employing async/await for efficient data retrieval

Attempting to utilize async-await in TypeScript Vue 3 to retrieve data, but encountering an issue where the function is already logging 'undefined' (or executing before the function call) private async exportDataOrder() { await this.getDataEx ...

typescriptasynchronousasync-awaitvuejs3

Incorporate the {{ }} syntax to implement the Function

Can a function, such as toLocaleLowerCase(), be used inside {{ }}? If not, is there an alternative method for achieving this? <div *ngFor="let item of elements| keyvalue :originalOrder" class="row mt-3"> <label class=" ...

htmlangulartypescriptfrontend

Using TypeScript to ensure class parameter types without affecting properties

I am tasked with defining a schema for "operations" that will be used in my application. This schema must be easily extendable for other groups of "operations" and should include a dictionary of settings for each keyword. Eventually, a "generic caller" wi ...

typescript

Utilizing React Typescript Discriminating Unions to choose between two different types based solely on props

In my project, I have a component that consists of different types: type Base = { color: string } type Button = { to: string } & Base type Link = { link: string linkNewTab: boolean } & Base type ComponentProps = Button | Link e ...

javascriptreactjstypescript

Assistance with Optimizing TypeScript - "The depth of type instantiation is overly excessive, potentially leading to an infinite loop. (Error code:

I'm currently working on extracting data- attributes from a complete object of element attributes using TypeScript code. However, I've encountered an error message stating "Type instantiation is excessively deep and possibly infinite (2589)." It ...

javascripttypescriptrecursiontypescript-generics

Vue3 and Typescript issue: The property '$el' is not recognized on type 'void'. What is the correct way to access every existing tag type in the DOM?

Currently, I am in the process of migrating a Vue2 project to Vue3 and Typescript. While encountering several unusual errors, one particular issue with $el has me puzzled. I have been attempting to target every <g> tag within the provided template, ...

typescriptvue.jsvuejs3

Setting up next-i18next with NextJS and Typescript

While using the next-i18next library in a NextJS and Typescript project, I came across an issue mentioned at the end of this post. Can anyone provide guidance on how to resolve it? I have shared the code snippets from the files where I have implemented the ...

typescriptnext.jsi18next

Filtering nested JSON in Angular 8 to create a new array of results

Within the function fetchdataFromAPI, I am receiving JSON data from an API response. My goal is to identify unique regions among all child objects in the JSON and create a new filtered array of objects that match my expected output. I have attempted to r ...

javascriptjsonangulartypescriptangular8

Error: The property you are trying to access does not exist within the type 'A' when using a custom type guard

I have implemented a user-defined type guard to verify my object's type, as outlined here. While the example in the documentation works well when used alone, I encountered an issue when incorporating the typeguard within another 'check' func ...

javascripttypescriptvuejs2typeguards

The Azure GraphQL serverless function encountering an issue with the Cosmos DB connection, displaying an

After developing a serverless GraphQL API function using Azure functions and connecting it to Cosmos DB, I have encountered an issue with "Invalid URL" that has been puzzling me for a week. Despite running the graphql function locally without any problems, ...

typescriptgraphqlazure-functionsazure-cosmosdb

I am developing a JWT authentication and authorization service for my Angular application. However, I am running into issues when trying to implement observables

I have created a user class and required interfaces as outlined below: user.ts import { Role } from '../auth/auth.enum' export interface IUser { _id: string email: string name: IName picture: string role: Role | string userStatus: b ...

htmlangulartypescriptangular-materialjwt

Issue encountered with Next.js 13.4 and NextAuth: A Type Error stating that 'AuthOptions' is not compatible with type 'never'

Currently, I am in the process of developing a Next.js 13.4 project and attempting to configure NextAuth using the app/router. Unfortunately, I have encountered a type error that I am struggling to troubleshoot. Below is my route.ts file: import NextAuth, ...

typescriptnext.jstypeerrornext-auth

Why does the order of the conditional check impact how function arguments are restricted when undefined?

I created a TypeScript function that enforces a rule where a function must accept either zero or two arguments, but not just one. In other words, if the first argument is passed in, the second parameter becomes required. Here is how the function looks lik ...

typescript