HMR doesn't work with Vue SFC

[ocavue]

🐛 bug report

When editing a Vue SFC (Single File Components), HMR doesn't work.

🎛 Configuration (.babelrc, package.json, cli command)

See the repo link below for details.

🤔 Expected Behavior

HMR works.

😯 Current Behavior

Having these error in my browser console.

index.js:121 TypeError: Cannot read property 'extend' of undefined
    at index.js:228
    at Object.reload (index.js:119)
    at eval (eval at hmrApply (hmr-runtime.js:153), <anonymous>:64:17)
    at Object.eval (eval at hmrApply (hmr-runtime.js:153), <anonymous>:70:7)
    at newRequire (parcel_issue_vue_hmr.e31bb0bc.js:47)
    at hmrAcceptRun (hmr-runtime.js:203)
    at hmr-runtime.js:60
    at Array.forEach (<anonymous>)
    at WebSocket.ws.onmessage (hmr-runtime.js:59)
(anonymous) @ index.js:121
(anonymous) @ VM255:64
(anonymous) @ VM255:70
newRequire @ parcel_issue_vue_hmr.e31bb0bc.js:47
hmrAcceptRun @ hmr-runtime.js:203
(anonymous) @ hmr-runtime.js:60
ws.onmessage @ hmr-runtime.js:59

index.js:122 Something went wrong during Vue component hot-reload. Full reload required.

💁 Possible Solution

🔦 Context

💻 Code Sample

https://github.com/ocavue/parcel_issue_3182

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	12.4.0
npm/Yarn	yarn 1.16.0
Operating System	macOS 10.13.6

[DeMoorJasper]

In theory it should work, pretty strange that this error only comes up now after almost a year of supporting vue without much changes.

Might be a change in vue’s hmr code idk

_{Sent with GitHawk}

[ocavue]

I noticed that the version of @vue/component-compiler-utils is 3.0.0. Maybe it contains some breaking change and causes this issue.

[ocavue]

I found the way in this comment vuejs/vue-hot-reload-api#61 (comment) can avoid the error.

[s0oft]

@ocavue doesn't work for me 🤷🏼‍♂️

[juniorgarcia]

Parcel site actually guides you how to mount your app here, with the render property.

For the curious:

Vue site explains here about the Virtual Dom, and finally a great article about the "mysterious" h function here.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.