Webpack Devserver

[mikerockett]

I have a project using Vue CLI 2, and it looks like things fail when a hot reload signal is emitted to the browser. I'm opening this issue here as I think it would be the best place to start.

The error received is:

Uncaught TypeError: this.$close is not a function

Somehow, that method is being destroyed or unlinked. If this has been seen before, please do point me in the right direction. At present, I'm having to reload the page for it to work.

Using v3 of the package, if that helps.

Thanks 👍

[hjkcai]

Could you please send me a minimum demo to reproduce this problem?

[mikerockett]

Have been battling to find time to do this. That said, the issue is persisting quite a bit. I'm going to quickly put something together – hopefully you'll be able to reproduce it on your end.

[mikerockett]

As an aside, it doesn't always happen, but it happens every 2 out of 3 hot reloads, as an estimate.

[hjkcai]

It sounds weird. I am quite busy either these days. I will try to reproduce this myself when a have free time.

[mikerockett]

I'm trying to put this demo together, and now I'm not able to reproduce… 🙈 So my best guess is that it may or may not have something to do with memory consumption and the dev-server (where a fresh app won't consume as much memory).

In three different production projects, reproducing is quite easy, as it happens more often. So I think the best I can do is send a screenshot of the error and stack when it happens again, which won't be long now (😉).

[mikerockett]

In this case, I'm using a base-modal that asks the parent to close. This particular project is powered by Vue CLI 3, though from my experience, that isn't going to make a difference... :-(

[hjkcai]

Maybe something else has affected vue-modal-dialogs while webpack is doing hot reload? I guess it is a potential bug of vue-modal-dialogs.

Was the dialog opened during hot reloading?
Which file did you edit, the dialog or other components? Was that file contains the dialogs wrapper component?
Can you paste the source code of your dialog component here?

If I am not able to reproduce this problem, do you mind if I do some debugging through TeamViewer on your computer?

[mikerockett]

Maybe something else has affected vue-modal-dialogs while webpack is doing hot reload?

My thinking has been the same — something's interfering.

Was the dialog opened during hot reloading?

Yes, it only happens when its open.

Which file did you edit, the dialog or other components?

Most of the time, it's the dialog itself. In fact, I think it's 100% of the time – I'm only ever really working on a dialog file whilst the dialog is open.

Can you paste the source code of your dialog component here?

This is the dialog (work in progress) for the above error: https://gist.github.com/mikerockett/569c1e06a55fdde4f39b204a348eb444

… do you mind if I do some debugging through TeamViewer on your computer?

I'm sure that can be arranged. That said, I'm sure you'll be able to reproduce at some stage, considering that everyone at my workplace using vue-modal-dialogs is experiencing the same thing.

[mikerockett]

Update, I see this is happening with $afterLeave as well:

[hjkcai]

It is really a complicated dialog🙈 I am free right now. Do you have free time now? If you have, send the TeamViewer session to my email huajingkun1214@gmail.com. Thanks!

[mikerockett]

I know 😄 I tend to put forms in dialogs... I'll email you the details now.

[mikerockett]

Interesting thing: it just happened without the modal being open. One or two hot-reloads later, I opened the modal, and it wouldn't close (the $close error in this instance).

[hjkcai]

The reference of the original dialog component is 'saved' by the create function when the entire app is initializing. So after hot reload, I think all the dialogs should remain unchanged. But in fact, webpack changed part of the dialog component. So what you see on the screen is partially modified (not fully reloaded). I will try to make it work.

[mikerockett]

Interesting theory, considering that it happens, say, 8/10 times. Then again, I'm not acquainted with the hot-reload process, so I'm just thumb-sucking here.

Thanks for your help 👍

[hjkcai]

You are welcome. Actually I am not quite familiar with the hot reload neither. Since there is a problem, it is time to find it out 😆

[hjkcai]

@mikerockett Hi Mike, I think you have found a bug in vue-hot-reload-api, which provides the ability of hot reload. I have created a minimal reproduction and sent a issue to them (vuejs/vue-hot-reload-api#68). Now we gotta wait for their answer 🤣

[mikerockett]

Ah, so it has less to do with Webpack then — good to know. Does this explain the "Anonymous Component" we saw in the tree?

[hjkcai]

Nope. Maybe that is another question.

[mikerockett]

I solved that specific issue by giving the modal a name of NewDonor; seems to make sense.

[mikerockett]

I noticed yesterday that the $afterLeave error is now persisting. I noticed this when expanding on my BaseModal component. The flow goes like this:

1. Hard/Soft Refresh the page (did not test with routing to a page though)
2. Open the modal
3. Close the modal
4. $afterLeave is not a function
5. Open the modal
6. Close the modal
7. No more errors, original error count does not increase

Weird...

I'm going to see what happens with a production build in the next day or so.

[hjkcai]

This problem seems to be related to hot reload. We have to wait for applies from Vue 🤔

…

On Wed, Jun 6, 2018, 11:57 Mike Rockétt ***@***.***> wrote: I noticed yesterday that the $afterLeave error is now persisting. I noticed this when expanding on my BaseModal component. The flow goes like this: 1. Hard/Soft Refresh the page (did not test with routing to a page though) 2. Open the modal 3. Close the modal 4. $afterLeave is not a function 5. Open the modal 6. Close the modal 7. No more errors, original error count does not increase Weird... — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#14 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAsovnmqzPBgM3xyucKADNEDDQjvi7KDks5t51MQgaJpZM4UExgt> .

[eporroa]

Hey @hjkcai I've been working with Nuxt and Vue and I'm seeing the same issue in the hot reloading. Either way, nice work!