- did you register the component correctly error

web
mobile

Topic: - did you register the component correctly error

Pisarev pro asked 2 years ago

Try to use input componennt in contact section (see simple example below). But fet an error: [Vue warn]: Unknown custom element: <mdb-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
<template>
<div>
    <container>
    <section id="contact" class="lighten-5 my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Напишите нам</h2>
      <row>
        <column md="9" class="md-0 mb-5">
            <row>
              <column md="6">
                <!-- <div class="md-form mb-0"> -->
                  <mdb-input type="text" id="form-contact-name" label="Your name"/>
                <!-- </div> -->
              </column>
              <column md="6">
                  <mdb-input type="text" id="form-contact-email" label="Your email" />
              </column>
            </row>
            <row>
              <column md="12">
                  <mdb-input type="text" id="form-contact-phone" label="Your phone" />
              </column>
            </row>
          <div class="text-center text-md-left">
            <btn color="primary" size="md">Send</btn>
          </div>
        </column>
        <column md="3" class="text-center">
          <ul class="list-unstyled mb-0">
            <li>
              <fa icon="map-marker" size="2x" class="blue-text"/>
              <p>San Francisco, CA 94126, USA</p>
            </li>
            <li>
              <fa icon="phone" size="2x" class="blue-text mt-4"/>
              <p>+ 01 234 567 89</p>
            </li>
            <li>
              <fa icon="envelope" size="2x" class="blue-text mt-4"/>
              <p>contact@example.com</p>
            </li>
          </ul>
        </column>
      </row>
    </section>
  </container>
</div>
</template>
<script>
import { Container, Row, Column, Avatar, Btn, Fa, mdbInput, MdTextarea, Card, CardBody  } from "mdbvue";
export default {
  components: {
    Container,
    Row,
    Column,
    Avatar,
    Btn,
    mdbInput,
    MdTextarea,
    Card,
    CardBody,
    Fa
  },
};
</script>
<style scoped>
</style>


Jakub Strebeyko staff answered 2 years ago

Hi, This is unusual, seems like you're doing a good "register the component" job done - copying and pasting your code into a webpack served project works fine, too. Can you try to update MDB Vue package? Best, Kuba

Pisarev pro answered 2 years ago

I have the latest MDB Vue Pro version (4.8.1)

Jakub Strebeyko staff answered 2 years ago

Is mdbInput the only component causing issues in these example?

Pisarev pro answered 2 years ago

Yes! But I have also tried "mdbSelect". It has the same error. Other components works correctly.

Jakub Strebeyko staff answered 2 years ago

Hi, Super weird! How about this - tell me how do you install mdbvue (is it as an outside gitlab dependency, or are you creating new project using starter kit .zip), and I shall follow your steps and use your code, so we can see exactly what went wrong. Does this sound OK with you? Best, Kuba

Pisarev pro answered 2 years ago

My steps:
  1. Add dependencies : {"mdbvue":"git+https://oauth2:<TOKEN_HERE>@git.mdbootstrap.com/mdb/vue/vu-pro.git"}
  2. in app.js I put the following code:
    import Vue from 'vue';
    
    import 'bootstrap-css-only/css/bootstrap.min.css';
    
    import 'mdbvue/build/css/mdb.css';
    
    import router from 'mdbvue/src/router';
    import AppExample from 'mdbvue/src/App.vue';
    
    import AlertPlug from 'mdbvue/src/components/pro/AlertPlug.js';
    
    Vue.use(AlertPlug);
    const app = new Vue({
    
    el: '#app',
    
    router,
    
    store,
    
    template: '<AppExample/>',
    
    components: { AppExample }
    
    });
    And I get an error: https://cloud.mail.ru/public/7jwM/WFpAV2cmT

Jakub Strebeyko staff answered 2 years ago

Hi there, Thanks for posting these! Tried to follow them as closely as I could with available info: 1. I used vue-cli 3 to scaffold a Vue project; 2. Imported mdbvue as a dependency (IMPORTANT: refrain from posting your token here, this one is for your eyes only) 3. Changed the main.js as described, but: a) had to omit the `store` option in root Vue instance, as it is not imported; b) had to add runtimeCompiler: true option to vue.config.js, since the  cli is by default a runtime-only and the stringtemplate is used. Both the forms/inputs page, as well as the snippet from the first post, worked. what I see Do you think I followed the instruction close enough? I believe there might something about the project you are importing it to that I do not know about and what is making mdbInput behave all funny. Let me know what you think. With Best Regards, Kuba

Pisarev pro answered 2 years ago

Hi,Kuba, I have made the same steps but nothing working. The reason is that I use Laravel with prebuilt webpack config (it calls 'laravel mix'). if I do a 'fresh' instalation of MDB Vue with webpack specific config as a new project so I wouldn't have such an error. It means that config somehow is different in Laravel and MDB Vue Pro package. I have made 'fresh' Laravel install and import MDB Vue Pro and have the same error. Did you try to setup MDB Vue Pro in Laravel? Can I share the files and you can check? Kind regards, Andrey

Pisarev pro answered 2 years ago

I have found the decision but it is not the best option. I have made changes in the original cod in core MDB Vue Pro libarary. The reason of an error is a recursive tree problem in MDB's components. May be a correct webpack config heals the problem during compiling I don't know but what I have done to fix the problem: 1. mdbbue/src/index.js
// import Input, { mdbInput } from './components/Input';
import mdbInput from './components/Input'; //import only mdbInput so as I don't need Input and it eliminates a recursive tree problem
2. mdbbue/src/components/Input.vue
//const Input = {
const mdbInput = {
props: {
basic: {
type: Boolean,
default: false
},....
// export default Input;
// export { Input as mdbInput };
export default mdbInput; //import only mdbInput so as I don't need Input and it eliminates a recursive tree problem
Anyway I hope MDB tech team will help to properly install  MDB Vue in Laravel project (I can share the assembled demo app)!
Kind regards,
Andrey

Jakub Strebeyko staff answered 2 years ago

Hey Andrey, Happy to read you figured it out. :) Huge thanks for the time you put in explaining the problem! It makes us see issues we did not know existed. How about I make a task out of this, so someone at the Vue dev team can have a look at the issue? If you are OK with it, please let me know if there is any particular Laravel setup that should be used for these tests. Are there any other details you think should be considered when trying MDBVue against Laravel  or dealing with said "recursivity" problem? If there are things we might tweak to make MDBVue some more Laravel-users friendly - we would very much like that. With Best Regards, Kuba

Pisarev pro answered 2 years ago

Hi, Kuba, I'm OK. I used a standart Laravel installation (the latest version 5.7). 1. My package.json has the following dependencies:
"devDependencies": {

"axios": "^0.18",

"bootstrap": "^4.0.0", // Laravel templates use Bootstrap library

"cross-env": "^5.1",

"jquery": "^3.2",

"laravel-mix": "^2.0", // a Laravel libraries which simpifies work with webpack via clear syntax

"lodash": "^4.17.5",

"popper.js": "^1.12",

"vue": "^2.5.7",

"bootstrap-css-only": "^4.1.1",

"mdbvue": "git+https://oauth2:[my_token]@git.mdbootstrap.com/mdb/vue/vu-pro.git",

"vue-router": "^3.0.1",

"babel-preset-stage-2": "^6.24.1" // it fixes the problem of compiling when run command "npm run dev"

}
  2. resources/views/welcome.blade.php add the following code:
 <head>

   <meta name="csrf-token" content="{{ csrf_token() }}">

</head>
<body>

  <div id="app">

      <example-component></example-component>

  </div>

   <script src="{{asset('js/app.js') }}"></script>

</body>
3. resources/js/app.js add the following code:
require('./bootstrap');

import Vue from 'vue';

window.Vue = Vue;

Vue.component('example-component', require('./components/ExampleComponent.vue'));

import 'bootstrap-css-only/css/bootstrap.min.css';

import 'mdbvue/build/css/mdb.css';

new Vue({

el: '#app'

});
4. After that you could add MDB Vue objects into resources/js/components/ExampleComponent.vue for testing If you have any questions, don't hesitate contact me directly (pisarev_aa@mail.ru). Kinde regards, Andrey

Jakub Strebeyko staff answered 2 years ago

Hi Andrey, Huge thanks for this! It been added as a MDB Vue Feature Request task and will have a developer assigned to it soon. The person will probably have to get some familiarity with Laravel first, then try out the setup you shared, wait for the input error to come up and then try to resolve it, tweak export/import statements as advised. If it all goes well, the Vue dev team will gather up and consider all the possible outcomes of the change in Input.vue and index.js. There are many steps and procedures involved, so I cannot be making promises at this point, but it is in everyone's best interest that we got this figured out and is on the TODO list. Thank you again, Andrey - thanks to you and people alike we are be able to improve MDB Vue further. With Friendly Regards, Kuba

GM answered 2 years ago

I can confirm that I face the same problem on Laravel.
Almost all components with the prefix "mdb-" do not work, of the workers I only got "mdb-navbar-brand".
I use components without the "mdb-" prefix and import them without "mdb" too.
Also ran into a non-working component "Dropdown". It is declared in index.js as "let Dropdown = require ('./components/Dropdown'). Default;". It helps to replace this line with "import Dropdown from './components/Dropdown';"


Jakub Strebeyko staff answered 2 years ago

Hi there @GM ,

Thanks for these details - writing a Laravel webpack build task out of this thread as we speak. The Vue team is returning from hiatus with full force next week and many issues will be tackled. Not sure about prioritization of their task list, but perhaps this one will be tested as well (no promises, though). There is a number of steps that must be undertaken to have this one figured out - first, in-house tests with Laravel Mix. Let us know of any details you might still have to help us!

Anyway, thanks to you the issue will not get lost! Abandoning the effort of components name prefix standardization could not be an officially supported, but thanks for the hot-fix solution, it has a potential of saving someone a lot of frustration.

With Best Regards,
Kuba


Jakub Strebeyko staff answered 2 years ago

Hi there guys,

Thanks to this thread the topic got pushed forth a bit and now I'd love to share some thoughts I, a total PHP newbie, had while trying to implement mdbvue "as is" into a fresh, basic Laravel 5.7.17 build. I would like to use it as a starting point for people with actual PHP skill to gather and shed some light onto the pains and pleasures of implementation of UI libraries.

NOTE: The guide below assumes there is PHP, Composer (& others) present on the machine. If not, I found this Laracast Laravel series a great intro smoothly guiding through the installation process.

MDBVUE LARAVEL HOW-TO:
1. $ laravel new yourappname
2. $ yarn add mdbvue
3. $ yarn add -D babel-preset-stage-2
4. in yourappname/resources/js/app.js add - this might seem v. tricky & weird* -
import 'mdbvue/build/css/mdb.css';
5. enhance a chosen blade template (default: "yourappname/resources/views/welcome.blade.php") with 
    a) id="app"
       this is where our Vue instance will be mounted
    b) <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
       in the head so that the default BS styles can get attached
    c) <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
       in, say, lower part of the body so that our js goodies actually get there
6. $ yarn dev
    it will compile both css and vue code into the output files we attached above
7. $ php artisan serve
    now we should have a php server running (by default at localhost: 8000)

*From what I checked adding styles through Sass's @import statement will concatenate BS and MDB styles the wrong order and so MDBootstrap styles will be getting overwritten by pure BS.

We should end up in an environment ready to test & implement mdbvue.
Few things to note here: Apparently everyone knew it except me, but Laravel comes in with a default support for Vue single-file-components (you can easily convert it into a React build btw). The "stub" they provide, the "yourappname/resources/js/components/ExampleComponent.vue" is a great place to start! It is the easiest place to import components from mdbvue to.

I must admit the road up to this point wasn't so straight-forward as I thought it would, but once you're here it is fairly easy to estimate what works and what does not. It MOSTLY WORKS!

@GM This is the setup I was checking mdbvue components in. I have not tested them all, but of the all I did they were all prefixed and worked. Could you please try to follow the guide and let me know whether the problems are still there? Or maybe without going through it all you already see a difference in what we did that might've contributed to the issue you described?

@Pisarev Thanks again for the instruction. I discovered there is no difference in implementation, as far as I checked, between a free and pro versions of mdbvue. What is important, though, is that I did not use Laravel Mix explicitly anywhere, nor did I fiddle with original codebase, and yet I did not encounter the registration / "recursiveness" problem (checked both mdbInput and mdbSelect). Do you think I might have missed something? Do not hesitate to share your thoughts, I am also ready to send the project to you so you can have a look. 

EVERYONE considering laravel + mdbvue stack, please get involved and follow the instructions above, get yourself a running project, fiddle with it by importing mdbvue components and share your experience - together with suggestions and bugs / inconsistencies you've experienced! That way we will end up with full laravel support in no time! I am sure the guide is universal and can help anyone struggling with implementing a Vue UI library into a Laravel project.

With Best Regards,
Kuba


Mikołaj Smoleński staff commented a year ago

I understand Your dissapointment, but still we do not have enough information and code to fix above issues. We'll produce the quick start tutorial for laravel users soon. Best regards


siacomputacion commented a year ago

I have followed the instructions to the letterI thought that with the purchase pro of mdb everything would be solved but it is giving me more work to adapt to mdb than looking for another alternativeThis guys does not work to see if you repair these errorsWe can not be asking so many hours to try to modify our projects to adapt mdb.

We leave it here and look for other alternatives in the market, very frustrating.


lugonet answered a year ago

I have the same issue. Is there any solution for this?


Mikołaj Smoleński staff commented a year ago

Hi there,

The above instruction is not a solution in Your case? Could You please share more details about Your project and Your code?

Best regards


siacomputacion commented a year ago

have followed the instructions to the letter but this type of errors appears and for more laps that I give I do not know how to solve it. I'm trying to implement mdb in an existing project that is made with laravel + vuejs + bootstrap and the idea is to integrate the power shown by mdbbotstrap, I have acquired the pro version. I have installed it by npm I have imported, I have used examples that are in your web and I appear errore like the following with the use of any element. select, checkbox, datatable, etc

The mistake is: VM2278 app.js: 67933 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

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

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

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


Mikołaj Smoleński staff commented a year ago

Have You tried to import components without 'mdb' prefix? Due to some similar issues we'll prepare a new instruction for Laravel Users and test all functionalities this week.

Best regards


Compltit pro premium commented 11 months ago

Has there been any update on the above?

I am using MDBVue Pro on Laravel Spark and getting:

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


Mikołaj Smoleński staff commented 11 months ago

Which component do you have a problem with?

Best regards


Compltit pro premium commented 11 months ago

all of them. whats odd is that i can load them all by their names if i remove the "mdb-" from the name, except "accordion" calls "mdb-accordion-pane" which in turn is not registered. this is a fresh install of the latest versions of spark/laravel.


Mikołaj Smoleński staff commented 11 months ago

We're still working on that issue. Please use the syntax without mdb prefix for this moment. Best regards


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Vue
  • MDB Version: 4.6.0
  • Device: Notebook
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No