For a fun side project, I am in the process of creating a "framework" to easily develop native web components. One aspect of this involves using a webpack loader to parse XML within custom .comp files and export an es2015 class. However, I've encountered an issue when trying to import these .comp files into my typescript files.
Importing these custom files in a regular javascript file works perfectly fine; the loader runs smoothly and produces the expected output. But, attempting to import them in a typescript file results in the error message,
Cannot find module 'test/test.comp'File '[path]/test/test.d.ts' is not a moduleHere's what my webpack config looks like:
mode: 'development',
watch: true,
entry: './test/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.ts/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.comp/,
use: path.resolve(__dirname, 'core/compose-loader.js'),
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.js', '.ts', '.comp'],
alias: {
'core': path.resolve(__dirname, "core/"),
'test': path.resolve(__dirname, "test/")
}
}
Here's a snippet from my tsconfig.json file:
{
"compilerOptions": {
"outDir": "build",
"baseUrl": ".",
"paths": {
"core": ["core/*"],
"test": ["test/*"]
},
"target": "es2015",
"typeRoots": ["./core"]
},
"include": [
"test/*.ts"
],
"exclude": [
"core",
"node_modules",
"**/*.comp"
]
}