VueJS Single File Component with typescript: Unable to find module stuff.vue

Question

I have a simple project structure:

/src/app2/main.ts /src/app2/components/lib.ts /src/app2/components/stuff.vue

With webpack, vue-loader, and ts-loader.

main.ts has:

import Vue = require('vue');
import  Component from './components/lib'

new Vue({
  el: '#app2'

});

When trying to build this with 1 webpack entry for /src/app2/main.ts, the error generated is:

ERROR in C:\temp\vuetest2\proj\src\app2\components\lib.ts
(2,25): error TS2307: Cannot find module './stuff.vue'.

ERROR in ./src/app2/main.ts
Module not found: Error: Can't resolve './components/lib' in 'C:\temp\vuetest2\proj\src\app2'
 @ ./src/app2/main.ts 3:12-39

If I change the entry point to src/app2/components/lib.ts, it will build. I'm at a loss as to why main.ts won't build.

Contents of lib.ts:

import Vue = require('vue');
import Stuff  = require('./stuff.vue');


let o = {
   Stuff
}

let componentLibrary = {
  components: o,
  registerExternal: function(v:any) {
    for(var k in o) {
        v.component(o[k].name, o[k]);
    }
  },
  registerInternal: function() {
    for(var k in o) {
        Vue.component(o[k].name, o[k]);
    }
  }
}

export default componentLibrary;

Stuff.vue is just a simple single file vue component.

Answer 1

According to : https://github.com/vuejs/vue-class-component/blob/master/example/webpack.config.js

Try adding appendTsSuffixTo ts-loader option in your webpack.config.js

webpack2

{
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    use: [{
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/]
            }
        }]
},