HMR not working in Vue CLI 4.5.6 with Vue 3 - Typescript

[fevernova90]

Describe the bug

With my current setup of creating a new project with Vue CLI, whenever I directly import FontAwesomeIcon and globally create the component in main.ts, HMR stopped working. If I use custom Vue Component, it is working just fine.

Dependencies

1. @vue/cli 4.5.6
2. @cue/cli-service 4.5.0
3. typescript 3.9.3
4. @fortawesome/fontawesome-svg-core 1.2.30
5. @fortawesome/free-solid-svg-icons 5.14.0
6. @fortawesome/vue-fontawesome 3.0.0-1

Expected behavior HMR reload normally after saving changes.

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from './store'

import './assets/styles/index.css'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faSpinner)

const app = createApp(App)
app.use(store)
app.use(router)
app.component('fa', FontAwesomeIcon)
app.mount('#app')

Console logs

There's a weird second dev related notification of webpack in Chrome console.

[dipasqualew]

I have the same problem. Double message, HRM only updates <style> blocks, not <template> or <script> blocks

[yoyoys]

Same here, just import it and it breaking.

[robmadole]

Ok, just released 3.0.0-2. Please give that a go and let me know.

[dipasqualew]

Thanks @robmadole ! I'll try the new release this evening and confirm whether it solves the HMR issue.

Btw really appreciate the work you do here. Cheers!

[christhofer]

@robmadole I'm experiencing HMR works when adding / removing the component But HRM doesn't works when changing the props (icon, size, fixed-width, etc)

[robmadole]

@christhofer that's another issue that hasn't been resolved yet.

[bobvandevijver]

HMR for the properties is still broken with 3.0.0-3