Hotload screwing up autocomplete

[bitnosis]

When i run "npm run dev", vue-autocomplete loads and works fine. If I manually refresh, it still works. fine.

However.....if I edit some code in my editor, which triggers hot reload, the autocomplete then stops working. Manual refresh also doesnt bring it back from there, which is very strange.

Infact, the only thing that brings it back into working state, is to shut down npm, and to re-run "npm run dev".

Any idea why?

[cosbgn]

Same here. When reloading the page I always get Unexpected token < (See screenshot -> https://cl.ly/17120b).

When navigating with this.$router.push("/pagex") it seems to work. When I reload manually or with hot-reload it throws the error. It seems to work fine in production

[dbalosh]

Hi, I'm not sure if it is relevant but I had the same issue with nuxt. The solution was following: https://github.com/nuxt/nuxt.js/issues/438

Meaning adding:

      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/\.(?!(?:js|json)$).{1,5}$/i, /^vue-google-autocomplete/]
          })
        ]
      }

To nuxt.config.js.

My guess is that editing webpack config to have something similar to

module.exports = {
    build: {
        extend(config, ctx) {
            if (ctx.isServer) {
                config.externals = [
                    nodeExternals({
                        whitelist: [/\.(?!(?:js|json)$).{1,5}$/i, /^vue-google-autocomplete/]
                    })
                ]
            }
        }
    }
}

Might solve it.

You can always also copy the node_modules/vue-google-autocomplete/src/VueGoogleAutocomplete.vue file directly to your components folder as a hack.

See also:

• https://www.npmjs.com/package/webpack-node-externals#optionswhitelist-
• https://webpack.js.org/configuration/externals/

[cosbgn]

@daniel-balosh Thanks but I keep getting nodeExternals is not defined trying the above. Copying the module to my components directory however worked.

[dbalosh]

Hi, good to hear the workaround worked. Do you have an import for the library? Something like: const nodeExternals = require('webpack-node-externals');

Regards, Daniel.

On 26 Sep 2018, at 12:20, Costantin [email protected] wrote:

@daniel-balosh Thanks but I keep getting nodeExternals is not defined trying the above. Copying the module to my components directory however worked.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.