JavaScript classes using templateEngineOverride: '11ty.js,md' are not redered properly upon change while using --serve

[wsteidley]

Operating system

Ubuntu 22.04

Eleventy

2.0.1

Describe the bug

This happens using the most basic example from the eleventy Getting Started and instead of using index.md I use index.11ty.js with the class defined below.

Tried using Node 14, 16, and 18

Firefox and Chrome

index.11ty.js

// index.11ty.js
// I tried using module.exports = new Index() as well, same behavior
class Index {

  data() {
    return {
      title: 'Index Page',
      templateEngineOverride: '11ty.js,md',
    }
  }

  render(data) {
    return '# This should be the markdown title123'
  }

}
module.exports = Index

Reproduction steps

Reproduction steps:

1. Create a new eleventy folder eleventy-sample
2. cd eleventy-sample
3. npm init -y
4. npm install @11ty/eleventy --save-dev
5. create index.11ty.js as described below
6. npx @11ty/eleventy --serve
7. navigate to localhost:8080 to see the contexts of index.11ty.js
8. make a change to the index.11ty.js file
9. See the page is no longer displayed and instead the class definition is shown in the browser

Expected behavior

Template content is expected to update as with any other template when changes are made and display the compiled html rather than outputting the class definition.

Reproduction URL

No response

Screenshots

Initial load

Initial of the page with --serve works fine:

---

Error

After a change is made and the page is regenerated the browser spits out the class definition:

[pdehaan]

@wsteidley One workaround might be using renderTemplate() instead of trying to override the template engine.

// eleventy.config.js
const { EleventyRenderPlugin } = require("@11ty/eleventy");

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyRenderPlugin);

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

// src/index.11ty.js
class Index {
  data() {
    return {
      title: 'Index Page',
      // templateEngineOverride: '11ty.js,md',
    }
  }
  async render(data) {
    return this.renderTemplate(`# This should be the markdown "${data.title}"`, "md");
  }
}

module.exports = Index;

That seemed to survive a page edit+refresh when using --serve.