Eleventy fails to hot reload changes in imported TS modules

[ccoloma]

Operating system

Ubuntu 24.04.1

Eleventy

3.0.0

Describe the bug

Eleventy does not properly hot reload changes in TypeScript modules imported by a page. While direct changes to a page file, such as src/pages/index.11ty.tsx, are hot reloaded correctly, changes made to imported files are not reflected in the rendered output unless their parent files are also updated manually.

Example
Given the following file structure:

• src/pages/index.11ty.tsx
  • imports src/_includes/layouts/DefaultLayout.11ty.tsx
    • imports src/_includes/components/Header.11ty.tsx

1. Changes in DefaultLayout.11ty.tsx:

If you update DefaultLayout.11ty.tsx, Eleventy detects the change but renders index.11ty.tsx using the old content of DefaultLayout.11ty.tsx. The updated content only appears if you subsequently make a change to index.11ty.tsx.

2. Changes in Header.11ty.tsx:

If you update Header.11ty.tsx, the changes are not reflected until you manually update both DefaultLayout.11ty.tsx and then index.11ty.tsx in that order.

Reproduction steps

A repository to reproduce the issue can be found here.

1. Run npm run watch.

2. Modify src/_includes/components/Header.11ty.tsx or src/_includes/layouts/DefaultLayout.11ty.tsx.

3. Observe that changes are not reflected in the rendered page until you update the parent files as described above. You will need to manually reload the page because of the error seen on the issue Bug Report: Circular Structure Error in Hot Reload with .11ty.js Files #3481

Expected behavior

When a file like Header.11ty.tsx or DefaultLayout.11ty.tsx is updated, Eleventy should hot reload the page (index.11ty.tsx) with the latest changes from all dependencies without requiring manual updates to parent files.

Reproduction URL

https://github.com/ccoloma/11ty-with-ts

Screenshots

No response