Issues with watching JS layouts and dependencies

[nathonius]

Operating system

Windows 11

Eleventy

3.0.0

Describe the bug

Sort of re-opening #1312 after Zach asked for a minimal repro. I'll summarize the issue here; when using a javascript layout file, eleventy rebuilds when the layout file changes, but its output does not - the content of the html in the output directory remains the same.

This may also apply to javascript content, but I'm not using those so I haven't run into the issue. More context on my specific usecase is in the discord: https://discord.com/channels/741017160297611315/1321267999189110849

I realize this may actually be an issue with eleventy-dev-server, but figured I'd start here.

My current workaround is as follows, which is painfully slow (at least until #3335):

    "serve": "concurrently \"npm run watch\" \"npm run sync\"",
    "watch": "tsx watch ./node_modules/@11ty/eleventy/cmd.cjs --config=.eleventy.ts",
    "sync": "browser-sync start --server --ss public --files \"./public/**/*.html\"",

Reproduction steps

• use a javascript layout file
  • In my repro, I'm using preact
• Serve
• See the correct output from the content and layout file
• Make a change to the layout file
  • See that a change was detected in the file
  • See that eleventy rebuilds
• The content served to the browser does not change

Expected behavior

• The rebuild should not reuse the previous layout

Reproduction URL

https://github.com/nathonius/11ty-dev-server-repro

Just serve and make a change to the layout file.

Screenshots

No response

[nathonius]

As an addendum, I do believe this is an issue with eleventy itself and not the dev server as switching back to browsersync produces the same result.

Further, (part of) the issue may reside here:

eleventy/src/Util/JavaScriptDependencies.js

Lines 15 to 18 in 4e97e01

	// TODO does this need to work with aliasing? what other JS extensions will have deps?
	let commonJsFiles = inputFiles.filter(
	(file) => (!isProjectUsingEsm && file.endsWith(".js")) || file.endsWith(".cjs"),
	);

eleventy/src/Util/JavaScriptDependencies.js

Lines 37 to 39 in 4e97e01

	let esmFiles = inputFiles.filter(
	(file) => (isProjectUsingEsm && file.endsWith(".js")) || file.endsWith(".mjs"),
	);

It seems like we're filtering based on file extension; in my case at no point are these .js or .mjs files, they are .ts or .tsx. However, I do not believe this is the core problem - as compiling everything to .js files still results in the same problem.