Loading HTML files as a string

[azaslonov]

Hi there, I'm trying to setup ts-node with HTML files imported as a string like this:
import template from "./component.html";

Just for context: my application is built using webpack, which has html-loader plugin, but when I try to setup unit tests (with mocha), I can't use that loader, so I get this error:
error TS2307: Cannot find module './component.html' or its corresponding type declarations.

Any help greatly appreciated!

[ungaaaabungaaa]

There are two separate parts here: TypeScript needs a declaration for the import, and the test runtime needs a way to read the HTML. ts-node does not run Webpack's html-loader.

For CommonJS Mocha tests, I verified this small setup:

// html.d.ts
declare module "*.html" {
  const html: string;
  export default html;
}

Make sure ts-node loads that declaration. For a minimal test project, my tsconfig.json was:

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES2020",
    "strict": true,
    "esModuleInterop": true
  },
  "ts-node": { "files": true },
  "include": ["component.ts", "html.d.ts"]
}

Use your actual source/test paths in include. If your app uses another module setup, keep this in a separate test config and select it with TS_NODE_PROJECT; don't change the browser app's config just for this example. See ts-node's missing types guidance.

A small preloader can supply the runtime part:

// register-html.cjs
const fs = require("node:fs");
require.extensions[".html"] = (module, filename) => {
  module.exports = fs.readFileSync(filename, "utf8");
};

npx mocha --require ts-node/register --require ./register-html.cjs test.cjs

For example, component.ts can keep your original import and export the template; test.cjs can require("./component.ts").default. Mocha's --require loads these modules before the tests.

Limit: require.extensions is a legacy/deprecated CommonJS hook. This is a narrowly scoped workaround for an isolated CommonJS test process, not an ESM loader or a replacement for Webpack's HTML transformations. It returns the raw UTF-8 file, without minification or asset-URL rewriting. If those transformations are part of what you need to test, run the tests against the relevant Webpack output instead.

I tested Node 24.18.0, ts-node 10.9.2, TypeScript 5.9.3 and Mocha 11.8.0: without the declaration I got TS2307; adding only the declaration reached a runtime Unexpected token '<'; adding the preloader made an exact HTML-string assertion pass (1 test).

AI assistance: written with OpenAI Codex; the example and both failure cases were run locally.