Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue3 Nuxt2 error [moduleId] is not a function #129

Open
Malfunction13 opened this issue Mar 22, 2023 · 1 comment
Open

Vue3 Nuxt2 error [moduleId] is not a function #129

Malfunction13 opened this issue Mar 22, 2023 · 1 comment

Comments

@Malfunction13
Copy link

Malfunction13 commented Mar 22, 2023

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant