Localhost parcel server failing to refresh

Currently, I am utilizing the parcel (v2.0.1) localhost server with hot module replacement for developing a basic web application using HTML, SASS, and JS. While the HMR functionality generally works well, there are instances where, especially after significant code changes, the server updating ceases to function entirely. This means not only does HMR fail to work, but even manually reloading the page or restarting the server doesn't reflect any modifications. To ensure it wasn't just oversight on my part, I deliberately introduced changes that should have broken certain features, yet the page continued to operate normally.

I attempted deleting the .parcel-cache and dist folders and restarting parcel, but to no avail. Even rebooting my computer did not resolve the issue. The only reference I found related to this problem is in this github discussion.

Is anyone facing a similar challenge? Your insights would be greatly appreciated!

Below is the content of the package.json file: 

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "source": "index.html",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.1",
    "parcel": "^2.0.1"
  },
  "dependencies": {
    "core-js": "^3.19.3",
    "fractional": "^1.0.0",
    "regenerator-runtime": "^0.13.9"
  }
}

javascriptnpmparceljsparcel

Answer №1

Here is the code to include in your script tag:

 attribute="module"

Answer №2

The issue was resolved by implementing the code snippet below:

    "start": "parcel index.html && parcel watch index.html",

Answer №3

Encountered a similar issue: Parcel suddenly stops functioning. This seems to happen to me when I step away from a project for even just a day or two, and upon returning, the functionality is broken. Even after performing a complete reinstall (including removing the package.json file), the problem persists. Following the reinstallation, the previous faulty state remains unchanged: it still executes the most recent version of the code that was working fine before (even though all data was supposedly removed), and fails to respond to any modifications except for syntax errors which result in related error messages being thrown.

Answer №4

After some investigation, I found out that the issue (at least in my situation) stemmed from having all the project files stored in a cloud folder. Once I relocated the files to my computer's local drive, everything started functioning correctly!

Answer №5

Make sure to match the filename used for importing with the actual filename. For instance, if your script tag in index.html looks like this:

<script type="module" src="./src/App.js"></script>

Remember to create a file named App.js. Using a file named app.js will cause issues with hot reloading.

This guideline also applies when importing other component modules into parent files.

Answer №6

Make sure you include type="module" in the script tag and install the necessary dependencies using -D flag.

To clear the parcel cache and dist folder in Windows, you can use the following commands: rmdir /s /q .parcel-cache rmdir /s /q dist

After that, re-run Parcel.

If this solution does not work, it could be due to incorrect file name issues.

If you encounter ENOENT (no such file or directory) errors or problems with unlinking paths or fs, double-check that your file names are correct and case-sensitive. For example, use src="./App.js" instead of "./app.js" in your script files.

Try to analyze the error messages to troubleshoot the issue on your own as a final step.

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

Exploring a way to iterate through an object and check if it is the sole key available

I am currently utilizing jQuery.serializeJSON (https://github.com/marioizquierdo/jquery.serializeJSON). Essentially, I have a form structured like this: <input name='store[products][][type]' type='text' value='TableSaw' /& ...

javascriptjqueryjson

How to separate Meteor client and server with the help of mondora/asteroid?

Currently, I am exploring the integration of Meteor with my Angular project structure and templates. In this quest, I came across a library called Asteroid which is described as "A javascript client (browser and node) for a Meteor backend, Asteroid gives t ...

javascriptangularjsmeteor

AngularJs promise is not resolved

Before processing any request, I always verify the user's authorization. Here is the factory code that handles this: (function() { angular.module('employeeApp').factory('authenticationFactory', authenticationFactory); fun ...

javascriptangularjs

yii2: Utilizing the power of dynamic calling in widgets

Imagine I have a widget called Widget1; In the view file, I call this widget like so: <?= Widget1::widget() ?> Clicking on an element should trigger a new instance of the widget and execute its JavaScript scripts. However, I am unable to get the s ...

javascriptajaxwidgetyii2

Include additional data in the FormData object before sending it over AJAX requests

Currently, I am utilizing AJAX to store some data. The primary concern I have is figuring out how to incorporate additional information into the FormData object along with what I already have. Below is the function that I'm using. Could you assist me ...

javascriptjqueryajax

Are memory allocations made for empty indices in Typescript Arrays?

I am faced with the challenge of replicating a segment of a server-side database for processing within a typescript web application. My goal is to access specific records by their integer ID in typescript. The issue at hand is that the indices may not be s ...

javascriptarraystypescriptmemory

What steps can be taken to convert a list box into an editable box?

I created a listbox using a table because I needed to display two columns for the list. Now, I am attempting to enable editing the text directly within the table when I select an item from the listbox. Essentially, I want the selected item to become an edi ...

javascriptjquerylistbox

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...

javascriptcsshtmljquery-pluginssvg

Transforming a Python list into a JavaScript array

Hey there, I'm in the process of creating a JavaScript array of dates to input into a jQuery datepicker addon. Here is my Django view: def autofill_featured(request): show_id = request.GET.get('show_id') show = Show.objects.get(id=s ...

javascriptjquerypythondjangojson

Animated Debugging with Node.js

Encountering an issue with code that runs smoothly on other devices but seems to be laptop-specific. Even a simple "hello world" application is only displaying a debug image instead of the expected output. repository folder> node app.js Express Server ...

javascriptwindowsnode.jsdebugginggif

Automatically generated error notifications for Express-Validator

I am looking to implement an Express API and incorporate request input validation using express-validator. Here is my current validation middleware: protected validate = async (request: Request, response: Response, next: NextFunction): Promise<void> ...

javascriptnode.jstypescriptexpressexpress-validator

"The use of Node.js and Express.js in handling HTTP requests and responses

I am intrigued and eager to dive deep into the request and response cycle of backend development. Here's my query: I have a node.js express framework up and running. The app is launched and all functions are primed and ready for requests. app.use(&a ...

javascriptnode.jsexpress

How to Retrieve Upload Progress via HTTP Request in PHP

Is there a way to monitor the progress of file uploads by accessing the HTTP request in PHP? If so, how can this be achieved when uploading files into a MySQL database? require('../connect_db.php'); //Collect all necessary data $name = $dbc-> ...

javascriptphphtmlmysql

Transform an SVG string into an image source

Is there a way to convert an incoming string ' ' into an img src attribute and then pass it as a prop to a child component? I attempted the following method, but it hasn't been successful. `let blob = new Blob([data.payload], {type: &apos ...

javascriptreactjsimagesvgblob

Using nodeJS's util module to format and pass an array

I've been using util.format to format strings like this: util.format('My name is %s %s', ['John', 'Smith']); However, the second parameter being an array ['John', 'Smith'] is causing issues because m ...

javascriptarraysnode.js

Removing a row from a table with the click of a button

I recently wrote a piece of code to dynamically add or delete rows in an HTML table. The issue I'm facing is that while the addition of rows works perfectly fine, I'm unable to delete a specific row. Upon clicking the delete button, I encounter a ...

javascripthtmlhtml-tabledelete-row

Display the bash script results on an HTML webpage

My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...

javascripthtmlbash

Choose dropdown choices using Node.js, MySQL, and EJS

I am looking to create a dropdown list using data from my MySQL database. Specifically, I want to populate the names from the "customer" table in the select option of my "create budgets" form using EJS. However, I am encountering issues with passing EJS da ...

javascriptmysqlnode.jsdatabaseejs

Creating artwork using a "graphite drawing tool" on a blank canvas

I created a script that draws a series of lines on a canvas, giving it a sketch-like appearance. However, I have encountered two issues with the script. Firstly, why is the y value appearing to be twice as much as it should be? Secondly, why is the line w ...

javascripthtmlcanvas

Including JavaScript in HTML Error 404

https://i.stack.imgur.com/aQDPG.png I am struggling to understand why this import is not functioning as expected. I have tried using script/import.js but it still fails to work. The error message I keep receiving is: 127.0.0.1 - - [09/Sep/2020 15:09:35] ...

javascriptpythonhtmlimport