Lit-html dynamic import not rendering

Question

I am trying to import a function which returns a lit-html template, and then render it. If I define the function in place, the template successfully renders, however if I try and import the template dynamically, it renders [object Object].

import { render } from "lit-html";
import("/private.js").then(module => {
  // function sayHello(name) {
  //  return html`<h1>Hello ${name}</h1>`;
  // }
  // they appear to be identical objects
  // console.log("mod", module.default("beans")); // this renders properly
  // console.log("new", sayHello("beans")); // this doesn't
  render(module.default("beans"), document.querySelector("#app"));
});

private.js:

import { html } from "lit-html";

export default function sayHello(name) {
  return html`<h1>Hello ${name}</h1>`;
}

Answer 1

The problem is that because the two files are separate builds, both contain lit-html, which causes the error.