JS file changes require server restart

[josh-collinsworth]

Version

2.2.4

Platform

MacOS Sonoma 14.5 (M2)

What steps will reproduce the bug?

• Load a basic client-side .js file. In my case, I have a /_includes/layout.tsx file that calls to .js file in the root folder via a <script> tag.)
• After starting the server, make a change to the JS file
• Although the CLI reports that the change has been detected and then sent to the broser, the change is not registered until and unless the server is restarted. The JavaScript that was in the file initially will continue to run, unchanged, even after a hard refresh and with caching disabled in dev tools.

(Note: it appears this may be the case with images as well; perhaps any static assets)

How often does it reproduce? Is there a required condition?

As far as I can tell, there's nothing special other than the conditions above.

What is the expected behavior?

After detecting the change and sending it to the browser, the new JS should load instead of the old JS.

What do you see instead?

The old, initial JS continues to load and run until and unless the server is restarted.

Additional information

We're seeing this issue on https://github.com/denoland/docs, if you'd like to reproduce from there. (In my case, editing sidebar.client.ts, which should run on any individual doc page.)

[oscarotero]

Thanks @josh-collinsworth
It's indeed a bug that I just fixed it.

I'm in the middle of releasing Lume v2.3 with some new features, and one of the changes is to run the build in a Worker. This will allows to restart the build completely after some changes like modify the _config.ts file (i.e. to add or remove plugins) without need to stop and restart the build manually.

Unfortunately, now Prism is failing:

Inspecting the NPM code, seems that the self variable is not defined:

Replacing this variable with globalThis works fine.

Maybe this is a Deno bug? self property should exist in Workers contexts

If Workers are not stable on Deno, I can revert the changes and run the build in the main thread instead of a Worker, but it's a pitty because we lose the ability to rebuild after installing a new plugin.

[oscarotero]

FYI I have filed an issue with the self bug: denoland/deno#25008

[oscarotero]

Seems that the Deno bug with Workers is fixed!
You can use the latest development version of Lume with deno task lume upgrade --dev.

[josh-collinsworth]

Hi @oscarotero - it looks like we may have a recent regression on this bug somewhere. (Or, maybe it was fixed for one file type, but not another.)

I'm noticing that I need to restart the server before I can see changes to .tsx files, even when on the latest Lume, in the Deno Docs repo.

I believe this was working before, but if so, it hasn't been for a bit, I'm told. Any insights as to where this issue with .tsx files might be coming from?

[oscarotero]

Hi. I just tried to modify _components/Footer.tsx and _includes/layout.tsx and it was working in my end (the site is rebuilt and the browser reloaded, showing the changes).

Do you know any particular file with which doesn't work?

[josh-collinsworth]

Sorry, @oscarotero, I didn't realize the problem is much more narrowly scoped than I thought.

The issue can be seen in this PR (which I think should be merged into main within the next day or so).

Specifically, the issue seems to occur in the examples/index.tsx file; there, we're importing and using a <LandingPage /> component.

Changes made to the base examples/index.tsx file seem to update just fine. However, changes made to that imported LandingPage.tsx component are not reflected without a server restart.

So maybe the issue is with one .tsx file importing another and using it in this way, somehow? Or maybe we're just doing something wrong here. Looks like this is a little more off-topic of the original issue than I thought, but If you have any guidance it would be much appreciated.

[oscarotero]

Okay, I see you´re importing the components as esm modules (i.e. import { LearningList } from "../_components/LearningList.tsx";).

Sadly, Deno does't have any way to reload a module once they are imported. This is why in Lume components should be consumed through the comp variable.

This doesn't refresh:

import Header from "./_components/header.ts";

export default function () {
  <Header />
}

This does:

export default function ({comp}) {
  <comp.Header />
}

[josh-collinsworth]

@oscarotero Thank you so much for your help! Problem solved. ✅