Parcel: HMR doesn't work with Vue SFC

Created on 2 Jul 2019  ยท  6Comments  ยท  Source: parcel-bundler/parcel

๐Ÿ› 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|

Bug HMR Stale Vue

Most helpful comment

I found the way in this comment https://github.com/vuejs/vue-hot-reload-api/issues/61#issuecomment-433654600 can avoid the error.

All 6 comments

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

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

I found the way in this comment https://github.com/vuejs/vue-hot-reload-api/issues/61#issuecomment-433654600 can avoid the error.

@ocavue doesn't work for me ๐Ÿคท๐Ÿผโ€โ™‚๏ธ

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.

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.

Was this page helpful?
0 / 5 - 0 ratings