InvalidValueError: not an instance of HTMLInputElement

[davidplappert]

I get the error listed in the title when I generate my site using nuxt (npm run generate) and the field does not show up.

However, when I am developing my site, using npm run dev, everything works as expected, with no errors.

This is a live link using Nuxt: http://the-coffee-hub-com-dev.s3-website-us-east-1.amazonaws.com/

I am using nuxt for my site.

 "dependencies": {
    "@nuxtjs/axios": "^5.9.0",
    "nuxt": "^2.11.0",
    "nuxt-vuex-localstorage": "^1.2.6",
    "vuetify-google-autocomplete": "^2.0.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.0.0"
  }

                <vuetify-google-autocomplete
                  ref="address"
                  id="map"
                  :clearable="true"
                  country="us"
                  placeholder=""
                  :label="'mailing address'"
                  :required="true"
                  :reverse="false"
                  types="address"
                  v-on:placechanged="getAddressData">
                </vuetify-google-autocomplete>

import Vue from 'vue';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: '{MY REAL KEY}', // Can also be an object. E.g, for Google Maps Premium API, pass `{ client: <YOUR-CLIENT-ID> }`
  // version: '...', // Optional
  // language: '...', // Optional
});

Thank you for any help! Happy New Year!

[vonec]

any updates on this

[vonec]

still looking for a fix can anyone see whats happening, this is happening on a NUXT app

[vonec]

this fails only in production build, dev works perfect

[vonec]

I get the error listed in the title when I generate my site using nuxt (npm run generate) and the field does not show up.

However, when I am developing my site, using npm run dev, everything works as expected, with no errors.

This is a live link using Nuxt: http://the-coffee-hub-com-dev.s3-website-us-east-1.amazonaws.com/

I am using nuxt for my site.

 "dependencies": {
    "@nuxtjs/axios": "^5.9.0",
    "nuxt": "^2.11.0",
    "nuxt-vuex-localstorage": "^1.2.6",
    "vuetify-google-autocomplete": "^2.0.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.0.0"
  }

                <vuetify-google-autocomplete
                  ref="address"
                  id="map"
                  :clearable="true"
                  country="us"
                  placeholder=""
                  :label="'mailing address'"
                  :required="true"
                  :reverse="false"
                  types="address"
                  v-on:placechanged="getAddressData">
                </vuetify-google-autocomplete>

import Vue from 'vue';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: '{MY REAL KEY}', // Can also be an object. E.g, for Google Maps Premium API, pass `{ client: <YOUR-CLIENT-ID> }`
  // version: '...', // Optional
  // language: '...', // Optional
});

Thank you for any help! Happy New Year!

just checked your live site, did u fix it ? can you share the fix ?

[AndreiD]

@vonec anyone found a solution to this ? also using nuxt

[vonec]

import Vue from 'vue'

import { VTextField } from 'vuetify/lib' import vuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'

Vue.component('VTextField', VTextField) Vue.use(vuetifyGoogleAutocomplete, { apiKey: 'GOES HERE', })

this happened because the way nuxt import plugins add this import { VTextField } from 'vuetify/lib' to your plugin that fixed it for me

[monajafinerdit]

Great @vonec you saved my day

[dschreij]

Thanks @vonec. Disabling ssr for the component also works, but then it doesn't render at all with npm generate.

[lukkyjoe]

@vonec thanks so much. you also saved my day.

may I ask how you found the solution? How did you know to use { VTextField } etc. ?

also, do you (or anyone on this thread) know why npm run dev works fine but the issue only shows up in production?

I'm grateful that this solved my problem but I want to understand deeper.