Webpack HMR not working

[giorgi94]

I am using vue js, without cli, since I need to configure webpack myself. I couldn't make jsx (vuejs 3) hot update by webpack HMR, and documentation about it is really poor and I spent several hours searching and trying to make it work.

Is there any package, which provides need loader?

[TrungRueta]

Confirm with Vue Cli tsx/jsx work ok except one issue is losing state when update changes.

• HMR still work but only with .vue file, if create new page use .vue file then insert other tsx/jsx file as component of .vue file component then only tsx component lost state. If update .vue file then tsx component still keep state.

// -- vue file as root
<template>
  <div>
    this is summary 123 <parent />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import parent from '@/components/testing/parent';

export default defineComponent({
  components: {
    parent,
  },
});
</script>

// -- tsx as parent - inserted to vue file root
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import child from './child';

export default defineComponent({
  components: { child },
  setup: () => {
    const count = ref(0);
    let loop: any;
    onMounted(() => (loop = setInterval(() => count.value++, 1000)));
    onBeforeUnmount(() => clearInterval(loop));

    return () => (
      <div>
        this is parent {count.value} -+- <child />
      </div>
    );
  },
});

// -- child component .
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';

export default defineComponent(() => {
  const count = ref(0);
  let loop: any;
  onMounted(() => (loop = setInterval(() => count.value++, 1000)));
  onBeforeUnmount(() => clearInterval(loop));

  return () => (
    <div>
      this is child
      {count.value}
    </div>
  );
});

step to reproduce:

parent and child has interval number by second, see 2 values run same number as begin.

1. add new text to .vue file -> 2 number no reset, still same -> HMR work
2. add new text to parent -> 2 number reseted -> HMR or reload work on both components parent and child.
3. add new text to child -> 2 number reseted -> HMR no working, all tsx components reseted no matter which ones change.

[giorgi94]

Hi, I am sure with cli are minimal problems, but I don't use Vue Cli, because, I prefer to configure code myself, rather than it to be generated automatically. With Vue 2 I have this option, but on vue 3, more attention is given to cli and I don't like this tendency.

I haven't found any loader for jsx hot reload on vue 3. This is not a big problem, except hot reload everything works fine, but still needs to noticed.

And .tsx files also don't work, typescript writes that it needs --jsx flag, and on this also is no information.

Because of this concentration only on cli, many small details are missed out and are not properly documented.

[TrungRueta]

@giorgi94 i can confirm that Vue cli just a ready-to-go first state, configs will be same like own setup. But i agree for now plugins support jsx/tsx for Vue3 still mess. As i can see is default Vue Cli and your setup make project work with jsx/tsx ok, problem only from HMR stop working.

about .tsx not work i think you need add tsconfig.json line "jsx": "preserve". Other choice is copy code and conver to jsx, samples above just mini code and easy to remove ts syntax.

I love working with jsx/tsx but without HMR it not feeling good

[Amour1688]

Hi, I am sure with cli are minimal problems, but I don't use Vue Cli, because, I prefer to configure code myself, rather than it to be generated automatically. With Vue 2 I have this option, but on vue 3, more attention is given to cli and I don't like this tendency.

I haven't found any loader for jsx hot reload on vue 3. This is not a big problem, except hot reload everything works fine, but still needs to noticed.

And .tsx files also don't work, typescript writes that it needs --jsx flag, and on this also is no information.

Because of this concentration only on cli, many small details are missed out and are not properly documented.

Thanks for your issue. I will improve the documentation about TSX and solve the problem of HMR this week.

[TrungRueta]

@Amour1688 Hi buddy, any luck for HMR? Everything working perfect except HMR :( develop time expand a lot when waiting reload full page everytime edit ...

[TiBianMod]

@Amour1688 any progress with HMR ?

[Jokcy]

It seems @Amour1688 is busy working. I tried to go deep into vue-next source code to find how hmr worked. It seems impossible to keep state when hmr in component which render function returned in setup. We can simplely add

if (module.hot) {
    const api = __VUE_HMR_RUNTIME__
    module.hot.accept()
    if (!api.createRecord('aaabbbccc')) {
        api.reload('aaabbbccc', App)
    }
}

to every file to prevent page reloading, but I still can't find a way to keep state. @TrungRueta @TiBianMod will you guys accept full reload a component when hmr? Maybe I can pr to make this work.

[Amour1688]

It seems @Amour1688 is busy working. I tried to go deep into vue-next source code to find how hmr worked. It seems impossible to keep state when hmr in component which render function returned in setup. We can simplely add

if (module.hot) {
    const api = __VUE_HMR_RUNTIME__
    module.hot.accept()
    if (!api.createRecord('aaabbbccc')) {
        api.reload('aaabbbccc', App)
    }
}

to every file to prevent page reloading, but I still can't find a way to keep state. @TrungRueta @TiBianMod will you guys accept full reload a component when hmr? Maybe I can pr to make this work.

Thanks. There is an experimental repo vue-jsx-hot-loader, you can PR to the repo

[Jokcy]

@Amour1688 It seems you already did what I mentioned, so the question is: when will you publish it?

[Jokcy]

By the way, @Amour1688 Have you find out how to keep state in setup when hmr?

[Jokcy]

Maybe we can implement hmr in babel plugin like what did in vite ?

[TrungRueta]

Thank @Jokcy @Amour1688 ! I think until we have solution keep state, lost state in single component so far better than full page reload. <3

[Amour1688]