search

andrefelipe / vite-php-setup

Example on how to run Vite on traditional PHP sites
https://github.com/vitejs/vite
358 stars 52 forks source link

HMR update fails in Zend framework #6

Closed rokrupnik closed 2 years ago

rokrupnik commented 2 years ago

Hi, great setup, thank you for preparing this!

I have one issue though - when I set this up in Zend framework (Magento 1), HMR update fails with the following error (ignore the 404 for the image...): image

This doesn't happen if I set up the files in the same way as you did (simple php files). Then it works perfectly!

The URL in the framework looks like https://<host>/eng/<page-with-vue-component> but I see no other differences in the setup.

Does anyone have any idea on how to handle this? I saw the workaround with liveReload on the src files, but if possible, I would prefer to use HMR :)

andrefelipe commented 2 years ago

Hello @rokrupnik your code is just erroring at the line 34 of main.js: components[name] = modules[path].default

Maybe check what "modules[path]" is in your case console.log(modules[path])

Still, you can always import manually as delete this auto import thing:

import HelloWorld from './components/HelloWorld.vue'
const components = {
  HelloWorld,
}

HMR works fine when editing JS and CSS. The liveReload will only kick in if PHP files are edited.

rokrupnik commented 2 years ago

Thanks for the fast reply! I followed your suggestions but found nothing out of the order. The console.log in main.js displayed the component being properly imported. Even if I switched to manual imports the situation remained the same - HMR working in simple PHP files, not working when the page was rendered by PHP framework.

I guess I'll go along with liveReload workaround and live with that. Thanks again for the setup and the help!

andrefelipe commented 2 years ago

As last resort check if you have latest Node version. It sounds weird but on another issue that was the case.

Also check on Typescript side, seams you are using it.

But anyway don't give up too soon on HMR, it has nothing to do with Zend framework, it should be something else.

I have a Wordpress setup here, if it helps: https://github.com/wp-bond/boilerplate

rokrupnik commented 2 years ago

If anyone comes across this - I did some debugging and finally found the cause and a workaround for this (Vite version 2.7.10).

Cause: in vite client code (I was looking at dist version: vite/dist/client/client.mjs), in fetchUpdate function, line await Promise.all(Array.from(modulesToUpdate).map(async (dep) => {, the Array.from(modulesToUpdate) actually returned an empty Array instead of an Array of modules (and their paths) to update.

Workaround: I replaced the Array.from call with a spread operator. The before mentioned line becomes: await Promise.all([...modulesToUpdate].map(async (dep) => {

I checked Vite issues and tried to start a PR for Vite, but I got stuck, since I don't own a private computer and I can't do the stuff required for a PR on my work computer (IT restrictions). If someone with same issue has the resources to do so, it would be nice to alert the Vite team.