cant work with typescript

[tcstory]

structure of the project

webpack.config.js

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: 'dist/',
        filename: './js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
}

app.ts

declare var require;
declare var Vue;

new Vue({
    el: 'body',
    components: {
        'nani': require('../components/nani.vue')
    }
})

nani.vue

<template><p>纳尼?你再说一次.</p></template>

<script lang="ts">
    export = {
        methods: {
            sayHello: function () {
                alert('hello')
            }
    }
</script>

each time I run webpack, it always report this error,

$ webpack                                                                                                                     ‹ruby-2.1.4›
ts-loader: Using typescript@1.6.2
Hash: 54f28de48a69455dfb02
Version: webpack 1.12.9
Time: 1239ms
         Asset     Size  Chunks             Chunk Names
./js/bundle.js  2.74 kB       0  [emitted]  main
   [0] ./src/js/app.js 178 bytes {0} [built]
    + 4 hidden modules

ERROR in ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/nani.vue
Module build failed: Error: Could not find file: '/Users/tcstory/WebstormProjects/test/src/components/nani.vue'.
    at getValidSourceFile (/Users/tcstory/WebstormProjects/test/node_modules/typescript/lib/typescript.js:43586:23)
    at Object.getEmitOutput (/Users/tcstory/WebstormProjects/test/node_modules/typescript/lib/typescript.js:46680:30)
    at Object.loader (/Users/tcstory/WebstormProjects/test/node_modules/ts-loader/index.js:410:34)
 @ ./src/components/nani.vue 2:17-111

how to solve this problem?

[tcstory]

visit the link to see the project
https://github.com/tcstory/vue-loader-test

[yyx990803]

Interestingly this is because ts-loader is a big hack and is not a in-memory transform (i.e. it relies on actual files on disk), so it can't work with *.vue files... I don't think there's an easy way to make this work, unless someone who knows more about TypeScript can figure out why ts-loader is implemented that way.

[yyx990803]

On another look, you may need to set the transpileOnly flag to true: https://github.com/TypeStrong/ts-loader#transpileonly-boolean-defaultfalse

[tcstory]

:) thanks

[druppy]

I too, have tried to setup a TS environment using vue components (I love the idea that it is based on, its small site, and the goal to keep it that way), and while using vue in a plain ts file setup is not a big problem (you can even user nice decorators) , the vue files is a problem as stated above.

Further more, the editor support for the vue files is a problem too, as some kind of .d.ts file are missing too.

It would be nice if the vue-loader could optionally write a ts (or a d.ts) file in the same path as the vue component. This would fix the above problem, but more importantly it would make better IDE support too, as the tsc now knows the components types too.

[QuentinFchx]

Do you think this problem could be solved by the shorthand ambient module declarations proposal ?

[DanielRosenwasser]

Hey @yyx990803 can you elaborate a little on the problems? I'm not that familiar with Webpack's internals, but it looks like TypeScript is being fed the .vue file itself. I don't necessarily know why that would occur, since we don't try to resolve plain calls to require AFAIK.

[davidmoshal]

just to clarify, will ts hot-reload with non-*.vue files?
i.e: with vue-typescript ?
in this case, vue-loader wouldn't be used at all.

I have managed to get vuex to hot-reload with typescript, but the UI does'nt reload

thanks

[erik-sytnyk]

You can make vue-loader work with TS, if you put ts code in separate file.

myComponent.vue:

<template>
    ...
</template>
<style>
    ...
</style>
<script lang="ts" src="./myComponent.vue.ts"></script>

myComponent.vue.ts:

TS code goes here

You can use both 'ts' and 'awesome-typescript' loaders, just override ts lang option in vue-loader settings.

Sample usage here:

https://github.com/yegor-sytnyk/contoso-express/ branch alt/vue

[HerringtonDarkholme]

@DanielRosenwasser It seems vue-loader will transform .vue file into JavaScript, where content <script> tag will be transformed into seome require call like
require("!!ts!./../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./nani.vue")

Mind the selector.js in the middle. It comes from vue-loader and extract content in the script tag of a vue file. Then selector.js feed the extracted content to callback, which calls ts-loader defined here.

Here comes the problem. ts-loader do compile file by using filePath, not content. vue-loader feeds to ts-loader file path like *.vue rather than *.ts. TSC rejects vue file and ignores extracted content.

[DanielRosenwasser]

From what I understand of Webpack, sounds like if vue-loader was able to know to create a .ts intermediate file, things would "just work", but I could be wrong.

[HerringtonDarkholme]

I found as long as the filename ends with .ts, typescript will compile. ts-loader has already used a languageService so no intermediate file is needed. I could be wrong because I haven't tested multiple files but from reading the source I guess it would work.

[HerringtonDarkholme]

If anyone is still interested in using TypeScript in *.vue, vue-ts-loader is a choice to have a look.