Vue-material: Unknown custom element: <md-menu-item> while using select

[askdesigners]

Steps to reproduce

install and use MdSelect component

Which browser?

Chrome, "vue-material": "^1.0.0-beta-10.2"

What is expected?

The component would work when registered globally as described in the docs.

What is actually happening?

When using the select component, a recursive error is thrown. It's unclear how to resolve this when the code causing the error in inside an NPM module...

My code is

<md-field>
        <label>Call Day</label>
        <md-select v-model="selectedDay" name="callday" id="callday" md-selected="updateDay">
          <md-option v-for="callDay in callSlots" :key="callDay.start" :value="callDay.start" :name="callDay.start">{{callDay.date.cz}}</md-option>
        </md-select>
</md-field>

...

callSlots: [
        {"date":{"en":"Monday, 26th November","cz":"pondělí, 26. listopad"},"start":"2018-11-26","slots":["10:30","11:15","12:00","12:45","13:30","14:15","15:00","15:45","18:15"]},
        {"date":{"en":"Tuesday, 27th November","cz":"úterý, 27. listopad"},"start":"2018-11-27","slots":["09:00","09:45","10:30","11:15","12:00","12:45","13:30","14:15"]},
        {"date":{"en":"Wednesday, 28th November","cz":"středa, 28. listopad"},"start":"2018-11-28","slots":["12:00","12:45"]},
        {"date":{"en":"Thursday, 29th November","cz":"čtvrtek, 29. listopad"},"start":"2018-11-29","slots":["11:00","11:45"]},
        {"date":{"en":"Friday, 30th November","cz":"pátek, 30. listopad"},"start":"2018-11-30","slots":["11:15","12:00"]}
      ]

Error:

vue.esm.js?a026:591 [Vue warn]: Unknown custom element: <md-menu-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Any ideas?

[aburai]

@askdesigners try to add registration of MdMenuItem (and MdCheckbox) in MdOption.vue

 <script>
+  import MdMenuItem from 'components/MdMenu/MdMenuItem'
+  import MdCheckbox from 'components/MdCheckbox/MdCheckbox'
   import MdUuid from 'core/utils/MdUuid'

   export default {
     name: 'MdOption',
+    components: {
+      MdMenuItem,
+      MdCheckbox
+    },
     props: {

[askdesigners]

Hmmm ok. Shouldn't that go in the library? I mean I can do that but it will mean I have to put the whole UI library into my source code and make updates manually. :(

[aburai]

@askdesigners yes, i mean as a quick fix

[askdesigners]

Ugh so it looks like this causes some weird issue I don't get. When importing from node_modules it basically "works" save for the afore mentioned issue. However when I move it out of node_modules and import it from there it thrown an error like e.default is not a constructor.

Does node handle imports differently when they are from the node_modules directory?! Talk about confusing.

[askdesigners]

Like this : import { MdField } from "./lib/vue-material/dist/components"; throws this error Uncaught TypeError: r.default is not a constructor with some shitty webpack eval trace.
but this works: import { MdField } from "vue-material/dist/components";

Any ideas? Super annoying.

[Samuell1]

This can be issue because of path with webpack. I recommed you to use it as normal package with npm/yarn

[pawelbujna]

Sorry for interrupting, but facing the same problem and completely dont understand what 'to use it as normal package with npm' means. Isnt import { MdField } from "vue-material/dist/components"; a normal usage?

[Samuell1]

@pawelbujna yes but in comment https://github.com/vuematerial/vue-material/issues/1974#issuecomment-441610333 he was using some custom folder.

[seuck]

Why is this bug closed? It still happen. Just copy and paste the first Select code example from documentation: https://vuematerial.io/components/select

       <md-field>
          <label for="movie">Movie</label>
          <md-select v-model="movie" name="movie" id="movie">
            <md-option value="fight-club">Fight Club</md-option>
            <md-option value="godfather">Godfather</md-option>
            <md-option value="godfather-ii">Godfather II</md-option>
            <md-option value="godfather-iii">Godfather III</md-option>
            <md-option value="godfellas">Godfellas</md-option>
            <md-option value="pulp-fiction">Pulp Fiction</md-option>
            <md-option value="scarface">Scarface</md-option>
          </md-select>
        </md-field>

Error is:
Unknown custom element: <md-menu-item> - did you register the component correctly?

[johnirt]

This bug should not be closed. Vue Material select fields are unusable.

import Vue from 'vue';
import "vue-material/dist/vue-material.min.css";
import {MdField} from 'vue-material/dist/components';
Vue.use(MdField);

<md-field>
    <label for="reports">Report</label>
    <md-select v-model="report" name="reports" id="reports">
    <md-option value="daysSinceLastLogin">Days Since Last Login</md-option>
    <md-option value="loginsLast30Days">Logins Last 30 Days</md-option>
    <md-option value="clientsExceedingUsers">Clients Exceeding Users</md-option>
    </md-select>
</md-field>

Throws:
```
found in

--->



```

[MrStanDu33]

Any updates on this issue ? I'm also facing the same issue and it being a pain in the ass.

Tried to manually add component (cf #441089611) but it didn't help 🤔

[4lgar]

Workaround: It does not happend if I import the whole VueMaterial package. However, it could be nice if we can import only the usefull components :)

[cr0mbly]

Bump on this, seems like a bad workaround if we have to import the entire lib to make this work

[maxiujin]

I am having all of the same issues mentioned above.

[Doria-0107]

I am having all of the same issues mentioned above.

Maybe this is because both of your components depend on each other.

[BHEADRICK]

I get this error even if I only import the MdField component
I'm using webpack / npm in the normal node_modules path

import { MdField } from "vue-material/dist/components";
Vue.use(MdField);

[askdesigners]

Update: I solved this by switching to vuetify :D

[kanopa]

You need import MdField, MdMenu and MdList. Work for me