In my current project, I have integrated Vue for frontend development while still maintaining a significant amount of legacy code in TypeScript and jQuery. The legacy code resides within a 'ts' folder, whereas the new Vue single file components and some bootstrapping TypeScript files are located in the 'src' directory. While everything appears to be functioning correctly in VSCode and when directly calling 'tsc' from the command line, Webpack raises complaints whenever I import declarations/modules from the 'ts' folder.

Project Directory Structure

+ root
  + php/css/etc
  + ts
    + models
      - LegacyTypeScriptModules.ts
      - PlanDate.ts
    + js-defs
      - tools.d.ts
    - tsconfig.json (used to build only legacy code)
  + src
    + components
      - RecentChanged.vue
    + pages
      - Welcome.vue
    - App.vue
    - main.ts
    - tsconfig.json (primary configuration)
  - package.json
  - tsconfig.json (addressing experimentalDecorators issue in VSCode)
  - tslint.json
  - webpack.config.js

Error Message from npm Build

ERROR in ./ts/models/PlanDate.ts Module not found: Error: Can't resolve 'js-defs/tools' in '/Users/username/dev/project-root/ts/models' @ ./ts/models/PlanDate.ts 1:0-45 @ ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/RecentChanged.vue @ ./src/components/RecentChanged.vue @ ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/Welcome.vue @ ./src/pages/Welcome.vue @ ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue @ ./src/App.vue @ ./src/main.ts

Main tsconfig.json in 'src' Folder

{
    "compilerOptions": {
        "target": "es5",
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es2015",
            "es2015.iterable"
        ],
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "baseUrl": ".",
        "paths": {
            "*": [
                "*",
                "./*",
                "../ts/*"
            ]
        }
      },
      "include": [
          "**/*",
          "../ts/**/*"
      ]
}

webpack.config.js

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: /node_modules|vue\/src/,
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['.js', '.vue', '.json', '.ts'],
    modules: [
      'node_modules', 
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'ts')
    ],
...

First Vue File Importing a Legacy TS Module

import Vue from 'vue'
import { ChangedItem } from '../../ts/models/ChangedItem'
import { PlanDate } from "../../ts/models/PlanDate"
import { Customer } from "../../ts/models/Customer"
import { Component, Prop } from 'vue-property-decorator'

@Component
export default class RecentChanged extends Vue {
...

Class/Module Causing the Error

import { IDate, IDateSink, IDateSource} from "./interfaces/IDate";
import { addDays, pad } from "js-defs/tools";

export class PlanDate implements IDate {
...

Module That Cannot Be Found

import { IMainOptions } from "models/interfaces/IOptions";

export declare function addDays(d: IDate, n: number, keepTime?: boolean): IDate;
export declare function pad(inputString: any, width: number, paddingCharacter?: string): string;

It is worth noting that an initial problem arises as I am unable to get absolute paths working in Vue SFC, thus resorting to using cumbersome relative paths. Could this early issue be indicative of a larger problem? This inconsistency across VSCode, tsk, and Webpack persists. Additionally, there have been challenges with certain absolute paths in the legacy TypeScript classes, although it seems to function properly only when accessed from the 'ts' folder or deeper levels - though Webpack does not raise concerns about importing 'IDate'.

Given that both the bare TypeScript compiler and the VSCode language server do not present errors, it suggests a potential misconfiguration in the Webpack setup. Despite exploring various solutions such as 'resolve.alias' and 'resolve.modules' within webpack.config.js, the issue remains unresolved. Utilizing absolute and relative paths to import declaration modules, as well as testing non-dependent legacy classes, has yielded mixed results. It appears that the problem lies specifically with the resolution of the declaration file.

Update:

After reviewing the feedback and responses below, it seems likely that the issue revolves around how my own declaration file is defined, imported, or configured within Webpack. Can someone provide guidance on effectively utilizing declaration files in the context of Vue, Webpack, and TypeScript without encountering 'module not found' or 'no output emitted' errors?