Vue3 Nuxt2 error [moduleId] is not a function

[Malfunction13]

Hi as described in the title I get: Uncaught TypeError: __webpack_modules__[moduleId] is not a function I followed the guide and made sure to double check if everything is set up as per the suggestions from this issue: https://github.com/MadimetjaShika/vuetify-google-autocomplete/issues/30

nuxt.config.js: plugins:

    plugins: [
        .....
        { src: "~/plugins/vuetify-google-autocomplete", ssr: false }, // NOTE: i also tried with @plugins/....
    ]

build:

    build: {
        vendor: ['vuetify-google-autocomplete'],
}

in project-root/plugins/vuetify-google-autocomplete.js:

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

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: 'MY_API_KEY',

});

Also tried the more straightforward alternative method where in nuxt.config.js:

        { src: "~/plugins/vuetify-google-autocomplete.js", ssr: false }, // NOTE: i also tried with @plugins/....

I also tried removing the script injection logic from nuxtconfig as follows:

    head: {
        // script: [{
        //     src: `https://maps.googleapis.com/maps/api/js?key=MY_APY_KEY&libraries=places
        // `}],

Any idea how to fix this problem?

EDIT: Noticed in the example with issue #30 the plugins file imports and uses the package with lowercase first letter as: vuetifyGoogleAutocomplete Still no joy and same error on page load.

[Malfunction13]

Some updates: I managed pass the moduleId error by going down to "vuetify-google-autocomplete": "^2.0.0-Alpha.8" Then resolved the new error: Uncaught (in promise) TypeError: k is undefined google apis by adding in nuxt.config.json

head: {
    scripts: [{
            type: "text/javascript",    // new part
            src: `https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places

    }]
}

So now finally on page load it throws error:

[Vue warn]: Unknown custom element: <v-text-field> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VuetifyGoogleAutocomplete>
       <VForm>

i found a solution where you can manually export VTextField

Vue.use(Vuetify, {
  theme: {
    primary: '#121212', // a color that is not in the material colors palette
    accent: colors.grey.darken3,
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.base,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3
  },
  components: {
    VTextField
  }
})

however i am using @nuxt/vuetify package and this is not available to me I tried to add to the module config declaration the components part above like so: nuxt.config.js

    vuetify: {
        treeShake: true,
        theme: {
            themes: {
                options: {customProperties: true},
                light: {
                    primary: '#1a6a6a',
                    accent: '#86547c',
                    secondary: '#143237',
                    green: '#1a6a6a',
                },
            },
          components: {
             VTextField
          },
        },
    },

This attempt threw the following error on compile-time: FATAL VTextField is not defined