Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR doesn't work with Vue SFC

See original GitHub issue

🐛 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

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:6 (1 by maintainers)

Top GitHub Comments

4reactions

ocavuecommented, Jul 2, 2019

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

1reaction

s0oftcommented, Aug 23, 2019

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

Top Results From Across the Web

HMR does not work with certain code in Vue #8224 - GitHub

Describe the bug When using slot, the prop is not updated after modifying the prop of the child component. /...

HMR doesn't work since the vue cli plugins update (v5)

Show activity on this post. My team could fix it by adding the optimization object to our webpack config (in vue. config. js...

Vue - Parcel

Parcel uses the official Vue SFC compiler, which supports HMR out of the box so you'll have a fast, reactive development experience. See...

Single-File Components - Vue.js

IDE support with auto-completion and type-checking for template expressions; Out-of-the-box Hot-Module Replacement (HMR) support. SFC is a defining feature of ...

HMR: See Changes without Reloading - SymfonyCasts

This hot module replacement thing doesn't work with all JavaScript, but it does work well with Vue and React. Disabling CSS Extraction. But......