[SOLVED] TSIFY module not found html file. how do fix?

TSIFY module not found html file. how do fix?

I have a vue component that imports an HTML page.

this is the error I get when running the gulp task. This transpiles fine with default typescript 2.5. But blows up when I run it through browserify and tsify.

Error: Cannot find module 'detail.html'

here is my code

gulp task

gulp.task('build:workOrderDetail', function () {
    return browserify("src/WorkOrder/Detail/detail.ts")
        .add("src/html-shim.ts")
        .plugin("tsify", { project: 'tsconfig.json' })
        .bundle()
        .pipe(gulp.dest("dist/workorder-detail.ts"));
});

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "moduleResolution": "node",
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "dist"
  ]
}

component page

import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import Template from 'detail.html'

@Component({
})

export default class DetailView extends Vue {
    @Prop() workOrderId: number;
    template: string = Template;
    data() {
        return {
            message: 'hello'
        }
    }
}

html-shim.ts

declare module "*.html" {
    const Content: string;
    export default Content;
}

Solution

I ended up giving up on Browserify and using webpack. Basically copied and pasted the config from here https://github.com/Microsoft/TypeScript-Vue-Starter/blob/master/webpack.config.js with minimal changes and everything worked!