Currently, I am developing a library using Typescript and VueJS with webpack for handling the build process.
One of the challenges I'm facing is related to the generation of TypeScript declaration files (.d.ts).
In my source code, I have Typescript files along with Vue components. Each Vue component consists of two files: a .vue file and a .ts file.
For example:
Consider the following code snippet:
// index.ts
export { default } from './components/Foobar.vue';
// components/Foobar.vue
<template><p>Hello!</p></template>
<script lang="ts" src="./Foobar.ts"></script>
// components/Foobar.ts
@Component
export default class Foobar extends Vue {
}
After the build process, the output will look something like this:
lib/
dist/
index.js // my lib
index.d.ts // aggregated .d.ts with dts-bundle
lib/ // all my .d.ts are here !
index.d.ts
components/
Foobar.d.ts
The issue arises because dts-bundle fails to generate dist/index.d.ts due to invalid declarations (dist/lib/**/*.d.ts) created by ts-loader.
If we examine the content of dist/lib/index.d.ts, we see the following:
// dist/lib/index.d.ts
export { default } from './components/Foobar.vue'
The problem lies in the fact that /dist/lib/components/Foobar.vue does not exist. The correct definition for this component should be Foobar.d.ts, not Foobar.vue.d.ts.
During bundling, dts-bundle encounters difficulty finding /dist/lib/components/Foobar.vue.d.ts.
To resolve this issue, I simply need to replace the existing line:
// dist/lib/index.d.ts
export { default } from './components/Foobar.vue'
with:
// dist/lib/index.d.ts
export { default } from './components/Foobar'
This seems to be a common error, possibly originating from misconfiguration in my webpack setup. Here's a glimpse at my webpack configuration:
{
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: 'path/to/index.ts',
output: { /* ... */}
resolve: {
symlinks: true,
extensions: [
'.ts',
'.vue',
'.js',
'.json',
],
modules: [
'node_modules',
]
},
module: {
noParse: /^(vue|vuex)$/,
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: // cache path
}
},
{
loader: 'vue-loader',
options: {
cacheDirectory: // cache path
}
},
]
},
{
test: /\.ts$/,
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: // cache path
}
},
{
loader: 'babel-loader'
},
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [
/\.vue$/
],
}
}
]
}
// ...
}
plugins: [
new ProgressPlugin(),
new FriendlyErrorsWebpackPlugin({
clearConsole: false
}),
new VueLoaderPlugin(),
new ForkTsCheckerWebpackPlugin({
vue: true,
tslint: 'custom path to my file',
formatter: 'codeframe',
}),
new CopyWebpackPlugin(
[
{
from: 'assets',
to: 'dist',
ignore: [
'.gitkeep',
'.DS_Store'
]
}
]
),
new DtsBundlePlugin({
name: `MyModule`,
main: path.join(LIB_PATH, entry.output.path, 'lib', 'index.d.ts'),
out: path.join(LIB_PATH, entry.output.path, 'index.d.ts'),
verbose,
})
],
}
I am currently working on creating a minimal reproduction repository for this issue, which I will update as needed.
In the meantime, please let me know if additional information is required.
Thank you for your assistance.