'Parcel does not reload changes to HTML page

I'm trying to get up and running with Parcel but I can't get a basic setup to work. I would like to serve a static HTML page that automatically reloads when it's changed.

When I go to http://localhost:1234, Parcel serves my page. If I change anything in the index.html, it does not reload... or it reloads with an empty response.

versions

parcel: 1.12.4
npm: 6.12.1
node: v13.3.0

index.html

<!doctype html>
<html>
    <head>
        <title>Tinsel town</title>

        <script src="app.js"></script>
    </head>

    <body>
        <h1>Tinsel…</h1>
    </body>
</html>

app.js

// empty

Shell

matt$ parcel index.html --log-level 5
[13:20:42]: Server running at http://localhost:1234 
[13:20:42]: Building...
[13:20:42]: Building index.html...
[13:20:43]: Building app.js...
[13:20:43]: Built app.js...
[13:20:43]: Built index.html...
[13:20:43]: Producing bundles...
[13:20:43]: Packaging...
[13:20:43]: Building hmr-runtime.js...
[13:20:43]: Built ../../../usr/lib/node_modules/parcel-bundler/src/builtins/hmr-runtime.js...
[13:20:43]: ✨  Built in 477ms.
[13:20:49]: Building...
[13:20:49]: Producing bundles...
[13:20:49]: Packaging...
[13:20:49]: ✨  Built in 2ms.
javascriptvimparceljs


Solution 1:[1]

Vim and how it saves files was the the issue.

When you save in Vim it renames the file you're editing and saves the current buffer to the file location:

           +------------+       +---------------------------------+
           | index.html +------>+ ~/.cache/vim/backup/index.html~ |
           +------------+       +---------------------------------+


                            index.html is now kaput!

              (no `MODIFY` filesystem event fired, only `DELETE`)


                        +----------+       +------------+
                        | *buffer* +------>+ index.html |
                        +----------+       +------------+

                        (`CREATE` filesystem event fired)

This default behaviour can be changed by setting backupcopy to yes in your .vimrc:

set backupcopy=yes " Necessary for ParcelJS to work

This causes Vim to write directly to the file you're editing, which in turn causes a modification event to fire in the filesystem. Parcel see's this and does it's thing.

Solution 2:[2]

parcel watch allows you to hot reload both javascript & html but it will not create a running dev server so you will need to combine two npm commands to run the parcel dev server along with hot reloading.

Yo can create a script combining the two npm commands instead of running 2 separate terminal tabs

package.json script setup below as an example

   "scripts": {
    "dev": "(parcel ./src/index.html) & parcel watch ./src/index.html",
    "build": "parcel build ./src/index.html"
  },

in your terminal run: npm run dev

Solution 3:[3]

Move script tag from head to body tag and add type="module" attribute.

like this:

<!doctype html>
<html>
    <head>
        <title>Tinsel town</title>
    </head>

    <body>
        <h1>Tinsel…</h1>

        <script type="module" src="./app.js"></script>
    </body>
</html>

This should solve you problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matt Deacalion
Solution 2 Jackie Santana
Solution 3 yogesh kumar

Related Questions