ParcelJs now automatically adds an additional "/" before every file link

I've encountered an issue while working on a TypeScript project with ParcelJs. After building the project and opening it on the ParcelJs server at http://localhost:1234/, everything functions perfectly. However, when I try to access the project outside of this server, all my files are not found due to an extra / at the beginning of each file link.

For example, ParcelJs generates links in my index.html like this which do not work:

<script src="/src.4254afb6.js"></script>

But removing the / makes everything work as expected:

<script src="src.4254afb6.js"></script>

How can I resolve this issue?

javascriptnpmparceljs

Answer №1

If you want to convert all links into relative ones (without any /), you must include an additional parameter --public-url with the value ./ while executing ParcelJs as shown below :

parcel index.html  --public-url ./

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

creating a div that functions similarly to a radio button

Is it possible to create a div that mimics the behavior of a radio button? I'm looking for a solution that doesn't involve jquery, as many people have recommended. After doing some research, I found a few potential options. In the past, I'v ...

javascripthtmlcss

Create objects in the gallery

I recently developed a React Material-UI component using Typescript: <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid item xs={5}> <B ...

javascriptcssreactjstypescriptmaterial-ui

Implement a vertical bar to appear next to the tree view when it is expanded

I am struggling to implement a vertical line for the first level of list items when they are expanded and remove it when they are closed. I have tried using li::after but it doesn't seem to work. Can someone provide guidance on how to achieve this? T ...

javascripthtmljquerycssdom

Unable to fetch packages from NPM due to proxy restrictions causing download errors

I am currently working on a server that is connected to the Internet through a proxy. Unfortunately, I do not have access to modify the proxy configuration settings. Within the .npmrc file, the following options are set: https-proxy = "https://10.1.0. ...

node.jsnpmproxyhttp-proxy

Incorporating library files (css/js) into your app built on the angular-fullstack framework

After using a Yo Angular-Fullstack generator (https://github.com/DaftMonk/generator-angular-fullstack) to start an app, I attempted to install Toastr from bower with the command: bower install angular-toastr Now, I need to add the toastr css and js files ...

javascriptcssangularjsnode.jsyeoman

How can I make a page scroll to the center when clicking on a carousel?

My goal is to create a webpage where clicking on the carousel will center it on the page. A great example of this functionality can be seen on the Studio New Work website (). As I am still in the process of learning JQuery, I have not yet mastered all the ...

javascriptjqueryhtml

Executing a Select Change in a React Application using CasperJS

Has anyone else encountered difficulties with this issue? I have a basic React page set up, with a simple component that renders a select element and triggers a callback function when the value changes. Here is the basic structure of the component: const ...

javascriptreactjsphantomjshtml-selectcasperjs

Retrieve form data from Vuex state to make edits

I recently completed a tutorial on Vue to enhance my skills, and I'm now facing an issue while trying to make some changes. The tutorial I followed can be found here. Specifically, I have a "settings" page where users can edit their profile details. ...

javascriptfirebasevue.jsvuex

Tips for Eliminating Unnecessary Fields from Output based on Condition

My projection stage code is as follows: { 'name': {$ifNull: [ '$invName', {} ]},, 'info.type': {$ifNull: [ '$invType', {} ]}, 'info.qty': {$ifNull: [ '$invQty', {} ]}, 'info.detailed ...

javascriptnode.jsmongodbaggregation-framework

Encountering an issue while trying to create a user in Firebase

I am currently following a tutorial on Vue.js from Savvy Apps, which utilizes Firebase with Firestore. As the tutorial mentions that Firestore is still in Beta, I anticipate potential changes - and it seems like that might be happening in this case. While ...

javascriptfirebasevue.jsfirebase-authenticationgoogle-cloud-firestore

AngularJS $scope variable issue

After searching online, I found this code snippet that I tried to implement, but unfortunately, it's not displaying any data. Below is the HTML code: <html data-ng-app=""> <head> <title>Example 4: Using AngularJS Directives an ...

javascriptangularjsangularjs-scope

javascript execute process and make a function call

I'm experiencing a problem with JavaScript. When I click a button, it calls a function. function onButtonClickFunction() { ajaxCall(); } function ajaxCall() { $('.black_overlay').show(); /* Some Ajax Code */ $('.blac ...

javascriptjqueryajaxoverlayshow

Creating a validation error in Angular: When a user submits an empty form, radio buttons will be highlighted in red

I have encountered an issue already posted on GitHub regarding this matter, but unfortunately, no solution has been provided yet. You can view the issue here: https://github.com/angular/components/issues/11333 I was wondering if there are any workarounds ...

javascriptangulartypescript

Eliminate the unnecessary blank page from the print preview by incorporating a setTimeout function to efficiently showcase the image

Having trouble with print preview in Chrome? Want to print with images inside without displaying them initially? You can use setTimeout to show the image after a delay. However, this method creates a blank page at the end. If you remove the setTimeout, th ...

javascripthtml

What benefits does minifying server-side nodejs code provide?

Is there a benefit to minifying Node.js code in the same way as minifying JavaScript, particularly for reducing size and improving network download speed? When a file is required in Node.js, it is loaded into V8 and processed and stored in memory in some f ...

javascriptnode.jsminify

Issue with selenium webdriver isDisplayed() method in Javascript

I am currently developing a test using Selenium and JavaScript. During one part of the test, I need to go through an array of input elements and fill in values for those that are visible. if (textInputs.length > 0) { console.log('handling tex ...

javascriptseleniumselenium-webdriver

Using Node.js to run numerous SQL queries

As a newcomer to node.js, I am working on a demo app using nodeJs. I am encountering an issue when running multiple queries in my code: exports.dashboard = function(req, res){ req.getConnection(function(err,connection){ var id = req.session.userId; ...

javascriptnode.jsejs

Passing a variable from a child component to a parent component in Angular 2 using EventEmitter and a

I am experiencing a challenge with the Event Emitter in my child component. My goal is to pass a variable with EventEmitter to the parent component, but I would like to include a timeout function. Currently, the code looks like this: CHILD: export class ...

javascriptangulartypescript

Angular Sending JSON Data via POST Request

Whenever I submit an empty form through my Angular application, the JSON being sent is as follows: {foo: {}} This causes a 500 error to occur on my server instead of the expected 422 error, since the server requires the following structure: {foo: {bar: ...

javascriptjsonangularjsngresourceangularjs-resource

Leveraging the power of AJAX, PHP, and JavaScript to display numerous status updates throughout an extended operation

It has come to my understanding that when using PHP, it is not feasible to send messages to the DOM using AJAX as the entire script must finish executing before the response becomes available. This leaves me with two possible solutions: Break down the le ...

phpjavascriptcssajaxwordpress