Vue-loader: Hot reload not working with TypeScript (lang="ts")

[chanon]

Reproduction here:
https://github.com/chanon/ts-vue-hmr
(Updated to Vue 2.2.1 with all npm dependencies updated.)

The current (unwanted) behavior is that any changes to the template or TypeScript code in the .vue file triggers a whole page reload.

See:
https://github.com/chanon/ts-vue-hmr/blob/c8638b8/src/components/Hello.vue#L36-L44

[chanon]

Using the latest vue-cli webpack template as a starting point, this looks like it has been fixed / the behavior is correct.

[AugustSaintFreytag]

This issue post here seems to be the only report on the entire internet. Hot reloading does not work with the example project by Lindquist (https://github.com/johnlindquist/nuxt-typescript). I know it is Nuxt not Vue, but guide me into some direction. Been looking for a solution the entire damn day.

Using a .vue component with <script lang="ts" src="./file.ts"></script>, changing the contents of the file does not hot reload. Inlining its contents works, even replacing the .ts with a .js works. I suspected an issue with the ts-loader, but awesome-typescript-loader has the same problem.

[chanon]

Yes, configuring webpack and getting hot reloading to work is the most frustrating thing! I spent a day too when starting my most recent project a few weeks ago. But I do have it working with .vue single file components and using script lang="ts" right now.

I could probably create a minimal example project. Should have a bit of time later today.

Otherwise, I'd have to take a look at your webpack config or maybe tell me exactly what is happening eg. if there are any errors in order to help.

[AugustSaintFreytag]

Thanks for looking into it so promptly after over a year, @chanon! It's only an issue when using external .ts files, from the experiments I tried to do, it must be failing (or, not-noticing, rather) between Webpack watching and the TypeScript compiler.

Do you have an example config file, for webpack and a tsconfig?

[chanon]

Alright, here you go:
https://github.com/chanon/vue-ts-hot-reload-example

[AugustSaintFreytag]

Thanks, it does have the same issue for me, however:

1. Open 127.0.0.1:8080 as-is, we can see "Hello there".
2. Open saySomething.ts in an editor, change text.
3. Text is not changed via hot reload, only after reloading the page manually.

Can you reproduce this or does it refresh without a manual kickstart?

[chanon]

You need to open it with http://localhost:8080 otherwise, as the javascript console displays in my case, you will get:

So, yes, if I open it with 127.0.0.1:8080 it does not work.
But if I open it with http://localhost:8080, then everything works fine.

[AugustSaintFreytag]

Sorry, that misunderstanding was entirely my fault — I did open it via localhost, just typed out the url as an example.

The issue, though, remains the same. Changing anything in the external .ts doesn't trigger a hot reload, other changes do (like changing the contents of components directly). I did find one example project where this worked for me, however: https://github.com/ryutamaki/vue-template-webpack-typescript

Here, I can put the script content of the HelloWorld.vue into a HelloWorld.ts and reference that with a <script lang="ts" src="./HelloWorld.ts"></script>, it does work with hot reloading. Now I need to find out what the differences are.

[chanon]

Well, that is very strange as I have tested my project above to work both under Windows 10 and Ubuntu (including editing the external .ts file as that is why I have it there).

[chanon]

The project you linked uses webpack 3.6, webpack-dev-server 2.9.1, so it is probably very different (and using old stuff)

Anyways, if you find the cause, let me know too.

BTW, I am using

• TypeScript 2.9.1 (not sure if that would make a difference)
• Node.js 8.11.1

[AugustSaintFreytag]

Interesting, do you have the suspicion that there was some sort of issue introduced in a later version of the webpack-dev-server related to the watch functionality of the TypeScript compile step?

My own project's dependencies brought onboard by nuxt are as follows:

webpack "^3.11.0"
webpack-bundle-analyzer "^2.10.0"
webpack-dev-middleware "^2.0.5"
webpack-hot-middleware "^2.21.0"
webpack-node-externals "^1.6.0"

[yyx990803]

Just use Vue CLI 3...

[AugustSaintFreytag]

@yyx990803 What difference would another cli version make to an existing vue or nuxt installation?

[chanon]

Yes, vue-cli 3 worked out of the box for me too, so you should try that.

For me, I just found with vue-cli template it was hard to customize the webpack config. Maybe it isn't that hard, but I didn't want to have to learn about configuring with webpack chain thing after already investing so much time to understand webpack config itself. That is why I wrote my own webpack configs. But I did use vue-cli template as a guideline.

As for vue-cli 3, it is using webpack4 IIRC, so again it will be very different in terms of the details.

[AugustSaintFreytag]

Alright, you fabulous people, I must thank you both. I try to find my way with vue and nuxt and I didn't know about vue-cli. Started off on version 3, selected all my extras and hot reloading external TypeScript files worked straight away. Trying to combine that with nuxt now.

[milewski]

I was having similar issue it was always triggering full page reload,... i nailed down the problem to ts-loader:

{
    loader: 'ts-loader',
    options: {
        transpileOnly: true, <------- here
        appendTsSuffixTo: [ /\.vue$/ ]
    }
}

setting it to transpileOnly: true and including the ForkTsCheckerWebpackPlugin made the hot-reload back to work as usually...

other solutions that "partially worked" too but inst ideal nor i recommend using are:

1 - setting webpack devServer.hotOnly = true
2 - or adding module.hot.accept() to the main entry fille making it "accept" every hot update request...

[bifacil]

We have a similar problem and @milewski solution worked for us.

We just set the transpileOnly option and it worked!

We spend many hours trying to figure it out...