I am currently in the process of setting up a basic project using Typescript and Parcel.
As part of this project, my goal is to import a .html file (or more specifically, its path) from a .ts file:
import html from "../renderer/index.html";
console.log(html); // file:///home/foo/bar/dist/main/renderer.1c7e1d82.html
To make this setup work as intended, I have added a declaration file named html.d.ts with the following content:
declare module '*.html' {
const value: string;
export default value
}
Here is the complete content of my tsconfig.json file:
{
"compilerOptions": {
"outDir": "dist",
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": false,
"strict": true,
"esModuleInterop": true,
},
"files": [
"src/main/main.ts"
],
"include": ["@types"]
}
The configuration seems correct, as my IDE recognizes the import statement above, and running tsc does not result in any errors, yielding the expected output (
require("../renderer/index.html")However, when attempting to bundle with Parcel (parcel build main.ts), although the compilation itself works fine and the import gets replaced by
new URL("renderer.1c7e1d82.html", "file:" + __filename).toString();d.ts file, displaying the following warning:
@parcel/transformer-typescript-types: Cannot find module '../renderer/index.html' or its corresponding type declarations.
/home/angrykoala/Desktop/scratchpad/gaucho2/src/main/main.ts:9:18
8 |
> 9 | import html from "../renderer/index.html";
> | ^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module '../renderer/index.html' or its corresponding type declarations.
10 | console.log(html)
11 |
According to the documentation, my .pretierrc is configured to use tsc:
{
"extends": "@parcel/config-default",
"transformers": {
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
}
}
Despite this, it still does not consider the files or include parameters from tsconfig. All alternative approaches I have attempted (like removing files) lead to the same issue.