Subscribe on changes!

Add an env variable to allow HMR in production

avatar
Jul 8th 2021

What problem does this feature solve?

We are developing a website editor.

Our editor is a Vue app, and we load asynchronously Vue components from external scripts. These scripts define Vue as an external dependency, and rely on the existing Vue object to work.

For the developer experience, we allow developers to load components in dev mode, so they can try how their components work inside the editor while developping them.

The editor is build in production mode, and everything was working perfectly in Vue2. We recently update our app to Vue 3, and this feature is not working anymore because HMR code is disabled in production mode, and a global missing object (__VUE_HMR_RUNTIME__) is causing an error from the external component code.

We understand its a good thing to have this code removed from the production build in 99% of the cases, but in our special usecase we would really like to activate this feature without forcing the app to fully go on dev mode. We know that this kind of flags already exists for devtool in production (__FEATURE_PROD_DEVTOOLS__), so maybe add a special flag for this usecase and do not rely on only __DEV__ ?

What does the proposed API look like?

Add a PROD_HMR env variable to enable HMR functionality to still exist in production build.