Unknown custom element

[shaneblaser]

Following the instructions in a read me I get the following error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[morphatic]

Yeah, I've noticed this, but haven't figured out what's wrong yet. This only happens if you try to import it inside of a single component, but not if you register it globally. To register it globally:

// src/main.js

// ...after your other standard imports...

// make sure you're using vuetify--see their docs for details on proper installation
import vuetify from '@/plugins/vuetify'

// import the library
import VStripeElements from 'v-stripe-elements/lib'
// and register it
Vue.use(VStripeElements)

// then initialize your app as normal
new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

Then in your component, you shouldn't have to import it. Just use it, e.g.

// src/components/SomeComponent.vue
<template>
  <div>
    <v-stripe-card
      v-model="cardSource"
      :api-key="apiKey"
      create="source"
    />
  </div>
</template>

<script>
  export default {
    name: 'SomeComponent',
    data: () => ({
      apiKey: process.env.VUE_APP_STRIPE_API_KEY,
      cardSource: null
    })
  }
</script>

Thanks for reporting, though! I think it's a pretty simple fix, but I haven't had time to look at it.

[shaneblaser]

Thanks I will try this

…

On Sun, Nov 17, 2019, 1:33 PM Morgan Benton ***@***.***> wrote: Yeah, I've noticed this, but haven't figured out what's wrong yet. This only happens if you try to import it inside of a single component, but not if you register it globally. To register it globally: // src/main.js // ...after your other standard imports... // make sure you're using vuetify--see their docs for details on proper installationimport vuetify from '@/plugins/vuetify' // import the libraryimport VStripeElements from 'v-stripe-elements/lib'// and register itVue.use(VStripeElements) // then initialize your app as normalnew Vue({ vuetify, render: h => h(App) }).$mount('#app') Then in your component, you shouldn't have to import it. Just use it, e.g. // src/components/SomeComponent.vue <template> <div> <v-stripe-card v-model="cardSource" :api-key="apiKey" create="source" /> </div> </template> <script> export default { name: 'SomeComponent', data: () => ({ apiKey: process.env.VUE_APP_STRIPE_API_KEY, cardSource: null }) }</script> Thanks for reporting, though! I think it's a pretty simple fix, but I haven't had time to look at it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#39?email_source=notifications&email_token=AAVU5X45B57UC32KS4GC24TQUG2DRA5CNFSM4JOK2HA2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEIWWXA#issuecomment-554789724>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVU5XYBVAVZ2AI2MDDXMQTQUG2DRANCNFSM4JOK2HAQ> .

[shaneblaser]

Yes I did get an answer the fix is to move your import into main Js don't Import in the individual component

…

On Mon, Dec 30, 2019, 5:47 AM Martin Pola ***@***.***> wrote: Did you find a solution to this problem? I'm having the same issue with per-component imports, but I'm also experiencing issues when registering the component globally. SASS complains about pretty much everything being invalid; very many error messages like this one (seemingly one per existing component): ` error in ./node_modules/vuetify/src/components/VTimePicker/VTimePickerClock.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after " @content <https://github.com/content>": expected "}", was "($material-light); " on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass from line 6 of node_modules/vuetify/src/styles/tools/_index.sass from line 1 of node_modules/vuetify/src/styles/styles.sass from line 1 of node_modules/vuetify/src/components/VTimePicker/_variables.scss from line 1 of /home/martin/versionskontrollerat/www/node_modules/vuetify/src/components/VTimePicker/VTimePickerClock.sass @content($material-light); } ----^ @ ./node_modules/vuetify/src/components/VTimePicker/VTimePickerClock.sass 4:14-215 14:3-18:5 15:22-223 @ ./node_modules/vuetify/lib/components/VTimePicker/VTimePickerClock.js @ ./node_modules/vuetify/lib/components/VTimePicker/index.js @ ./node_modules/vuetify/lib/components/index.js @ ./node_modules/vuetify/lib/index.js @ ./node_modules/v-stripe-elements/lib/VStripeCard.js @ ./node_modules/v-stripe-elements/lib/index.js @ ./src/plugins/v-stripe-elements.js @ ./src/plugins/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://10.105.51.34:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js` — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#39?email_source=notifications&email_token=AAVU5X3S4ZRDSYSHTPUD5MLQ3H3W5A5CNFSM4JOK2HA2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEH2KZBI#issuecomment-569683077>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVU5X45TIFW3JBL4GGDNTTQ3H3W5ANCNFSM4JOK2HAQ> .

[alexrussell]

I managed to get around this by just importing the component directly:

<template>
  <div>
    <v-stripe-card />
  </div>
</template>
<script>
import VStripeCard from 'v-stripe-elements/lib/VStripeCard'

export default {
  components: { VStripeCard },
}
</script>

Not absolutely ideal but better than a global registration for me until the export issue is resolved.

(Though, actually due to this component's non-use of Vuetify's form validation without extra effort and token creation on blur only I may have to use something else anyway.)

[gsidsid]

Did anyone find out a way to do this with Nuxt? I'm stuck getting "Cannot use import statement outside module" errors, despite trying to put in a plugin and using the transpile option.

[DArrigoni]

Had this issue and using import VStripeCard from 'v-stripe-elements/lib/VStripeCard'; fixed my problem as well. However, I had a slightly different error message:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.