ParcelJs is having trouble resolving the service_worker path when building the web extension manifest v3

Currently, I am in the process of developing a cross-browser extension. One obstacle I have encountered is that Firefox does not yet support service workers, which are essential for Chrome. As a result, I conducted some tests in Chrome only to discover that when attempting to build the extension manifest, Parcel fails to resolve the service worker path:

view image here

It's worth noting that:

  1. The exact path functions properly when used as a background "script" within the same version of the manifest (3)
  2. All other paths (such as those for the options page and popup) share the same structure and are recognized without issue

An error message I encounter states:

view image here

It appears that the path resolution starts one directory above, causing it to miss the root of the project. Despite researching online, I have been unable to find a solution.

Do you have any insights on how to address this issue?

I attempted using absolute paths with no success. Various types of paths were also tested, all without success. It is crucial that the manifest can be built and bundled correctly.

javascripttypescriptgoogle-chromeparceljsweb-extension

Answer №1

The problem was actually with the "rootDir" setting in tsconfig, causing the issue at hand. It's baffling how it managed to function properly before. Quite peculiar.

All I had to do was take out the "rootDir" from tsconfig.json and now everything is running smoothly.

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

Use the accelerometer in JavaScript and Cordova to control the movement of an object, such as a ball

Having trouble figuring out how to move a ball using the accelerometer. Any tips on combining the accelerometer values with the ball movement? Waiting for accelerometer... <div id="heading">Waiting for heading...</div> <div id="ball" ...

javascripthtmlobjectcordovaaccelerometer

Create a fake version of ElementRef and simulate the getBoundingClientRect() function

Looking to simulate ElementRef and access getBoundingClientRect() I experimented with the code below, but it didn't yield the expected results. const mockHostRef = { nativeElement: { getBoundingClientRect: {top: 10, left: 10} } } {pr ...

typescriptjestjs

Guide on implementing event listener for right click using pure JavaScript (VANILLA JS)

I need the div to appear wherever the cursor is holding down the right mouse button. In my scenario, I am using the following code: <div class="d-none" id="item"></div> #item{ position: absolute; top: 0; left: 0; w ...

javascripthtmlcss

The presence of 'eventually' in the Chai Mocha test Promise Property is undefined

I'm having trouble with using Chai Promise test in a Docker environment. Here is a simple function: let funcPromise = (n) => { return new Promise((resolve, reject) =>{ if(n=="a") { resolve("success"); ...

typescriptunit-testingmocha.jschai

The most effective method for transferring asynchronous data to pages in Next.js

My current directory structure: - components - NavBar - Header - Layout - pages - pages - demo.js - _app.js - index.js // index.js import React from 'react'; import NewLayout from "../../components/NewLayout/NewLayou ...

javascriptreactjsnext.js

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

javascriptjqueryhtmljquery-selectorsradio-button

Using VueJS to determine if a certain string includes a specific substring within an if-statement embedded within a v

I am aiming to verify if the link in a json object contains 'http'. If it does, I want to assign a target='_blank' attribute to the v-btn. The link could also be something like #test. Currently, this is how I am attempting to achieve i ...

javascriptstringvue.jsvuetify.js

Node.js server allows for accessing AJAX requests seamlessly

I need to send a parsed AST of JavaScript code to a server for processing, and then receive a list of completions back. However, when I log the AST to the client console before sending it, the structure appears like this: [ { "id":0, "type":"Program", "ch ...

javascriptnode.jsajax

Adding automatic hyphens in dates within React

My goal is to create a date field in React, similar to the one on this page, with the date format of yyyy/mm/dd. This is my current approach: const [date_of_birth,setDateofBirth] = useState(""); const handleChangeDOB = (e) => { let value = e.target ...

javascriptreactjs

"Implementing a Filter for Selecting Multiple Options in Ionic Framework

I need help with filtering books in an online library project using a modal page. The modal has 3 input fields for title, author, and year. How can I filter the books based on these inputs? Here is a snippet of my modal.html code: <ion-content pa ...

arraysangulartypescriptsearchionic-framework

Code for a regular expression that permits either letters or numbers with symbols

Here is the code snippet I am using for data validation in jQuery: return /^(?=.*[A-Za-z0-9/\$#.-_])[A-Za-z0-9/\$#.-_]$/i.test(value) The requirement is that the value should begin with letters or numbers, or a combination of both. Afterwards, ...

javascriptjqueryregex

Avoiding the storage of POST data in JSON format

Here is some code I am working with: var jsonString = "some string of json"; $.post('proxy.php', { data : jsonString }, function(response) { var print = response; alert(print); }); And this P ...

phpjavascriptajaxcross-domain

Guide on transforming a collection of files from formdata into a JavaScript object

I have a dataset containing multiple images associated with the same product id. import client from "@/lib/fetchWrapper"; export default async function addProductImage({ photo, productId, }: { photo: File[]; productId: string; }) { if ...

javascriptreactjsnext.jsfetch-api

Creating a declaration file for a library's entry point involves outlining the structure and types

I have developed an npm library that is made up of several ES6 modules, which are then consolidated into a single js file. The directory structure looks like this: src main.ts one.ts two.ts three.ts types index.d.ts index.ts The index.ts fil ...

typescriptnpm

Filter JSON data deeply for specific values

I am attempting to filter JSON data based on user checkbox selections in JavaScript. The challenge I'm facing is implementing multi-level filtering. The data has two dimensions that need to be filtered: first by OS selection and then by a selected que ...

javascriptjqueryangularjs

Tips for preventing the loss of ajax calls when an Oauth access-token expires

As the creator of a JavaScript browser application (SPA) that communicates with a server protected by OAuth 2, I encounter the challenge of using short-lived access tokens and longer-lived refresh tokens. While this specific scenario involves my own server ...

javascriptajaxoauthaccess-token

Tips for incorporating MUI into your Redwood JS project

Trying to integrate MUI into Redwood JS has been a challenge for me. I attempted to run the following command in the project directory: yarn add @mui/material Unfortunately, an error message appeared in the console stating: An error Running this command w ...

javascriptreactjsmaterial-uiredwoodjs

Using Javascript's .replace() method to preserve HTML elements

This is a JavaScript function I wrote function replaceCharacters(text_input){ return text_input .replace(/O/g, 0) .replace(/I/g, 1) .replace(/o/g, 0) .replace(/i/g, 1) .replace(/t/g, 4) .replace(/d/g, 9) ...

javascripthtml

Is there a way to prevent my timer from resetting whenever I refresh the page?

Hey everyone, I'm new to coding and I could really use some help here. I have this code for a timer but I'm struggling to make it work properly even after refreshing the page. My goal is to keep the timer running smoothly, but I'm not sure w ...

javascript

Dealing with TypeScript and the Mongoose loadClass problem

Working with Mongoose's class schemas has been very beneficial for me. Incorporating TypeScript into my Node project has enhanced the development process. I made sure to refer to Mongoose the Typescript way...? in order to ensure that my Model align ...

javascriptnode.jsmongodbtypescriptmongoose