Changes to dependencies are not reflected in the final compilation when running eleventy in --serve mode with jsx (or tsx) files.

[kobaj]

Operating system

Windows 11

Eleventy

3.10

Node

20.10.0

Describe the bug

See #3820 for the original request.

Problem: Changes to dependencies are not reflected in the final compilation when running eleventy in --serve mode with jsx (or tsx) files.

Other things I've tried

I assumed this was a problem with dependency resolution. But the following didn't not fix my problem.

// Placed inside of the tsx compile extension
this.addDependencies('./index.11ty.tsx', ['./_includes/head.tsx']);

Reproduction steps

I have a minimal example to reproduce the issue: https://github.com/kobaj/minimal-eleventy-jsx-watch-example

1. Run npm install
2. Run npm run serve
3. Open browser to http://localhost:8080/
4. Edit the file src/_includes/head.tsx
   for example change "My test page, woo!" to be "Why isn't this working?"
5. Observe that the text in the header of your browser is still "My test page, woo!"

Expected behavior

What I expect to happen at step 5 is for the header of my browser to be "Why isn't this working?". Instead, while there is a rebuild, it uses a cached set of dependencies and thus shows the old text in the header.

Reproduction URL

https://github.com/kobaj/minimal-eleventy-jsx-watch-example

Screenshots

No response

[kobaj]

Here is my workaround while this is fixed. Rather than running eleventy --serve I'm using light-server. So the command becomes:

npx light-server -s dist -p 8080 -b localhost -w "src/**/* # npm run build" -o

[zachleat]

Still looking into this but eleventyConfig.setUseTemplateCache(false); is the config API to disable internal caching! I saw a useTemplateCache: false in your test case (which isn’t a thing).

[kobaj]

Oh cool! That appears to work and dependencies are rebuilt now for jsx, thank you.

[zachleat]

Optionally if you want to disable the compilation cache for just your custom template type, you can use this:

  eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
    key: "11ty.js",
    compileOptions: {
      cache: false,
    },
    compile: async function (inputContent, inputPath) { … },
  });

Docs: https://www.11ty.dev/docs/languages/custom/#compile-options-cache-for-advanced-control-of-caching