Import raw file as a string

Question

In a type script project, I have some raw text files I want to import as strings, and that should be bundled in the final js file.

I use Webpack 5.21 in my project.

Let's say I have somewhere in my source files :

• app.ts
• templates\index.ts
• templates\somefile.tmpl.html

I expect, from my app.ts file, to be able to import like this :

import {somefile } from './templates'

somefile should be a string that contains the raw content of the tmpl.html file.

Here's what I tried :

• in my webpack.config.ts file I added this rule :

        {
            test: /\.tmpl\.html$/i,
            type:'asset/source',
            exclude: /node_modules/,
        }
  

I also added a resolve extension:

resolve: {
    extensions: ['.tsx', '.ts', '.js', '.tmpl.html'],
},

In my templates\index.ts file, I tried:

import somefile from './somefile.tmpl.html'

export default {
    somefile
}

However, when I call webpack from the command line I got:

[tsl] ERROR in C:\Code\myproject\src\templates\index.ts(4,23)
  TS2307: Cannot find module './somefile.tmpl.html' or its corresponding type declarations.

What's missing ?

PS: my background is a custom build system that took some typescript files, and convert them in standalone jsfiles. I'm not a running web app.

Answer 1

This error is related to Typescript, it doesn't recognize .html module

You need to add a d.ts file which will contain

// global.d.ts
declare module '*.tmpl.html' {
  const value: string;
  export default value;
}

// tsconfig.json
{
  compiler: {
  ...
  },
  include: ["path/to/global.d.ts"]
}