VueJS Single File component with typescript: cannot find stuff.vue module

Question

I have a simple project structure:

/src/app2/main.ts / src / app 2 / components / lib.ts / src / app 2 / 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 create this using 1 entry in webpack for /src/app2/main.ts, the generated error:

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 you change the entry point to src/app2/components/lib.ts, it will be built. I do not understand why main.ts will not build.

The 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 vue vue component.

Answer 1

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

appendTsSuffixTo ts-loader webpack.config.js

webpack2

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

Answer 2

PR github. , .

, SFC <script lang="ts">, <script lang="tsx">, *.ts utils *.tsx .

ts-loader *.ts *.tsx ( , ). , ts-loader : appendTsSuffixTo appendTsxSuffixTo. , . ( ts-loader *.vue, vue-loader ).

, *.ts.vue <script lang="ts"> SFC vue, *.tsx.vue <script lang="tsx"> SFC vue. ts-loader :

  {
    test: /\.tsx?$/,
    use: [
      {
        loader: 'babel-loader'
      },
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.ts\.vue$/],
          appendTsxSuffixTo: [/\.tsx\.vue$/]
        }
      }
    ],
    exclude: /node_modules/
  },

, *.ts *.tsx ts-loader, babel-loader . , .ts.vue, .ts *.ts.vue.ts, .tsx.vue *.tsx.vue.tsx. vue-loader. , ts-loader .ts .tsx.

vue-loader , <script lang="xxx"> vue-loader append xxx-loader , <script lang="tsx"> vue-loader tsx-loader, .

, vue-loader options:

  const loaders = {}
  loaders.tsx = ['babel-loader', 'ts-loader']
  loaders.ts = loaders.tsx
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: { loaders }
  },

webpack . tsx JSX .d.ts

github .

!