Server Not Updating JavaScript on File Change

support
1

When I’m using Hugo Server and I add JavaScript to my page in any other way that the raw script inside a <script> tag, the server does not update the scripts on file change. It will notice that the file has changed and rebuild. But it does not fetch an updated version of the file.

Is this a browser setting or a server setting I need to change?

2

I am unable to reproduce the problem as described, but without access to your repository it’s difficult to troubleshoot. Tested with Hugo v0.128.0.

Perhaps the browser is caching the JS. You could try opening your browser’s dev tools and disable caching. For example, with Chrome:

image

Keep dev tools open and test again.

3

I have the same issue, and it persists after disabling cache in developer tools, both in Chrome and in Firefox. i have also quit and restarted my code editor and run hugo server with various options.

hugo version
hugo v0.128.0+extended darwin/amd64 BuildDate=2024-06-25T16:15:48Z VendorInfo=brew

Current state of the project:

https://github.com/homerhanumat/tm2

4

The issue persists after disabling and clearing caching.

hugo v0.120.4-f11bca5fec2ebb3a02727fb2a5cfb08da96fd9df+extended windows/amd64 BuildDate=2023-11-08T11:18:07Z VendorInfo=gohugoio

5

@kayesspea can I ask how you build your JS? If with js.Build (the hugo template func, see js.Build | Hugo), are you setting a non-default format?

I have “never” had any issues with the default (iife), but I have been testing out esm for some upcoming code splitting feature, and I have seen some browser caching issues.

Also, could you try to add a $js | fingerprint and see if that forces a browser refresh of the script?

7

I’m including them right on the page. All of my content pages are .html files and I’ve included the scripts this a few ways:

  1. Raw text in a <script>
    • Works but is too big and not modular
  2. A <script> tag with a src attribute
    • This does not update unless I stop the server and start it again
  3. A shortcode that takes in a src and outputs a <script> tag with a src attribute
    • Again, I have to stop and start the server
  4. Raw text injected into a <script> tag via os.ReadFile
    • I was able to include and exclude scripts logically this way.
    • This is fine I guess but isn’t as simple as just including it in a script tag
    • So for instance a partial called includeScriptsTop might have something like
<script>        
  {{if .Params.scriptsToInclude.consoleSection}}
    {{ os.ReadFile "assets/js/consoleSection.js" | safeJS }}
  {{end}}
  {{ if .Params.scriptsToInclude.baseScripts}}
    {{ os.ReadFile "assets/js/_scripts.js" | safeJS }}
  {{ end }}
</script>

So I’m looking for a solution that lets me do a combination of #2 and #4. That way I can include and exclude things based on parameters as well as any page-specific scripts. I’m not sure where this behavior is coming from. But I only started doing #4 because I couldn’t just do #2

8

I’ve done a bit more poking around and found that scripts will update only if some markup is changed on the page. It can be as simple as adding a bit of whitespace. Perhaps this is why it is a very niche issue heretofore. Again, I’m not sure of where this behavior is coming from because I’ve been using Hugo for years and never encountered it before (or perhaps never noticed it before).

9

Perhaps my above note about changing some bit of markup will be helpful for you as well until we can pinpoint the source of the behavior

10

@kayesspea , thanks. I found that the issue for me was that after some unspecified amount of development, files in the assets folder ceased to be rendered at all. My workaround at present is to place my css and js folders in the static directory.

11

That makes sense. This is a “blog” that is really a set of min-apps that I export and use on my phone. I’ve been developing it for years so perhaps it’s a versioning issue