Uncaught ReferenceError: mdb is not defined at ecommerce-g

Michał Duszak staff answered 2 years ago

Please insert min. 20 characters.

@SKONSOFT I think your questions have been aswered above

As I understand it you are trying to integrate MDB with Symfony. Unfortunately, at the moment we do not support such integration and we do not have a ready solution.

@MyHomeTendance said:

mdb isn't global yet when it tries to instanciante EcommerceGallery. Solution was to split things up, define mdb global in global app.js and then import EcommerceGallery in another file, specific to the page/tool that needs it, and execute this JS file after app.js has been executed. Solves the problem.

Add comment

SKONSOFT priority answered 2 years ago

0 0 Best answer

I have solved this issue by making a very UGLY solution... Importing the JS file at the end of the HTML file directly by bypassing webpack...

<script src="/build/ecommerce.js"></script>

This issue still up to date and MDB Team had not found a solution yet. Hope they do that soon.

Add comment

SKONSOFT priority answered 2 years ago

0 0 Best answer

I got exactly the same issue.
I followed installation the plugin installation as described here:
<a href="https://mdbootstrap.com/docs/standard/pro/plugins-installation/" target="_blank">https://mdbootstrap.com/docs/standard/pro/plugins-installation/</a>

And this is my config app.js file:

<pre class="prettyprint"><code>import * as mdb from 'mdb-ui-kit'; // lib
import EcommerceGallery from 'mdb-ecommerce-gallery';
import MultiCarousel from 'mdb-multi-carousel'; // module
import Lightbox from 'mdb-ui-kit'; // module
import MultiRangeSlider from 'mdb-ui-kit';
import FileUpload from 'mdb-file-upload'; //plugin
import Cookie from 'mdb-cookies';

window.mdb = mdb // add lib as a global object
window.MultiCarousel = MultiCarousel; // add lib as a global object
window.EcommerceGallery = EcommerceGallery; // add lib as a global object
window.Lightbox = Lightbox; // add lib as a global object
window.MultiRangeSlider = MultiRangeSlider; // add lib as a global object
window.FileUpload = FileUpload; // add lib as a global object
window.Cookie = Cookie;
</code></pre>

And i have NPM + webpack + symfony.

All other modules works perfectly but when i add the ecommerce plugin i got:

<pre class="prettyprint"><code>ecommerce-gallery.min.js:1 Uncaught ReferenceError: mdb is not defined
 at ecommerce-gallery.min.js:1:54782
 at Array.forEach (<anonymous>)
 at Module.o.m.n (ecommerce-gallery.min.js:1:5
</code></pre>

Any solution ?

Regards

Please insert min. 20 characters.

I got exactly the same issue. I followed installation the plugin installation as described here: https://mdbootstrap.com/docs/standard/pro/plugins-installation/

And this is my config app.js file:

import * as mdb from 'mdb-ui-kit'; // lib
import EcommerceGallery from 'mdb-ecommerce-gallery';
import MultiCarousel from 'mdb-multi-carousel'; // module
import Lightbox from 'mdb-ui-kit'; // module
import MultiRangeSlider from 'mdb-ui-kit';
import FileUpload from 'mdb-file-upload'; //plugin
import Cookie from 'mdb-cookies';

window.mdb = mdb // add lib as a global object
window.MultiCarousel = MultiCarousel; // add lib as a global object
window.EcommerceGallery = EcommerceGallery; // add lib as a global object
window.Lightbox = Lightbox; // add lib as a global object
window.MultiRangeSlider = MultiRangeSlider; // add lib as a global object
window.FileUpload = FileUpload; // add lib as a global object
window.Cookie = Cookie;

And i have NPM + webpack + symfony.

All other modules works perfectly but when i add the ecommerce plugin i got:

ecommerce-gallery.min.js:1 Uncaught ReferenceError: mdb is not defined
    at ecommerce-gallery.min.js:1:54782
    at Array.forEach (<anonymous>)
    at Module.o.m.n (ecommerce-gallery.min.js:1:5

Any solution ?

Regards

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

@MyHomeTendance As I understand it you are trying to integrate MDB with Symfony. Unfortunately, at the moment we do not support such integration and we do not have a ready solution. It is possible that the problem lies with the Weback configuration itself. But we have webpack starter. Maybe this will help you create the appropriate configuration in symphony: https://github.com/mdbootstrap/mdb-webpack-starter

I closed the second thread you created so as not to duplicate posts.

MyHomeTendance priority commented 2 years ago

I actually expected that answer but I eventually came up with a solution. I think OP marked it as best answer here, so feel free to use it if anyone ever comes here with the same problem. I think this might be a problem with how Symfony's Encore (which is basically webpack wrapped up with some of its most useful plugins as I understand it) might group up every import before any other instruction. Meaning that mdb isn't global yet when it tries to instanciante EcommerceGallery. Solution was to split things up, define mdb global in global app.js and then import EcommerceGallery in another file, specific to the page/tool that needs it, and execute this JS file after app.js has been executed. Solves the problem.

What it doesn't explain though is why this is the only plugin i've had trouble with so far. As explained, your way of importing plugins works for Calendar or VectorMap for instance.

Still, good workaround to me, doesn't look that ugly even. Probably even pretty practical because we can access mdb through the whole Symfony app now.

I actually expected that answer but I eventually came up with a solution. I think OP marked it as best answer here, so feel free to use it if anyone ever comes here with the same problem. I think this might be a problem with how Symfony's Encore (which is basically webpack wrapped up with some of its most useful plugins as I understand it) might group up every import before any other instruction. Meaning that mdb isn't global yet when it tries to instanciante EcommerceGallery. Solution was to split things up, define mdb global in global app.js and then import EcommerceGallery in another file, specific to the page/tool that needs it, and execute this JS file after app.js has been executed. Solves the problem.

What it doesn't explain though is why this is the only plugin i've had trouble with so far. As explained, your way of importing plugins works for Calendar or VectorMap for instance.

Still, good workaround to me, doesn't look that ugly even. Probably even pretty practical because we can access mdb through the whole Symfony app now.

Please insert min. 15 characters.

Add comment

MyHomeTendance priority answered 2 years ago

1 0 Best answer

Alright, little update here (<a href="/profile/?id=214711" target="_blank" rel="nofollow">@David O'Connell</a>)

I finally got it to work. I don't know at all about your Symfony app's structure, but for me I have the global app.js file in my ./assets directory and I have other JS which are more context-specific, in other directories.

First I tried to import all mdb and EcommerceGallery in that global file, app.js, as documented by MDB. Triggered the error.
Than I tried to do both imports in a more specific JS file linked to a sandbox, just to try. Again, triggered the error.

And finally - and I don't even know why i didn't try that earlier - I tried to keep my mdb import in the global app.js - which is basically one of the first JS files to be executed - with window.mdb = mdb in it, to make it global. And in the more specific file - which is one of the latest JS files to be executed - my EcommerceGallery import. Turns out it works, no error riggered whatsoever, which means window.mdb has to be defined before any plugin import.

Last thing I tried, just to make sure, was to put again both imports in the same file but changing the order of instructions.

<pre class="prettyprint"><code>import * as mdb from 'mdb-ui-kit';
window.mdb = mdb;

import EcommerceGallery from 'mdb-ecommerce-gallery';
window.EcommerceGallery = EcommerceGallery;
</code></pre>

And error is triggered again. I don't know if your app's structure allows you to implement it this way, nor do I know if that behaviour was intended by MDB techs.

This'll work for me though.

Also, I answered my question above, why do we need to add mdb as a window object. Just makes things a lot more practical, mdb accessible through the whole app without reimporting it everywhere - which means it's also accessible for any plugin that would need global mdb object. This also means you don't need to make the plugin global aswell if you don't need to access it in a different file from the one you make the import in (window.plugin = plugin isn't mandatory).

Hope my explanation was clear, also hope this helps you David aswell as MDB techs !

Please insert min. 20 characters.

Alright, little update here (@David O'Connell)

I finally got it to work. I don't know at all about your Symfony app's structure, but for me I have the global app.js file in my ./assets directory and I have other JS which are more context-specific, in other directories.

First I tried to import all mdb and EcommerceGallery in that global file, app.js, as documented by MDB. Triggered the error. Than I tried to do both imports in a more specific JS file linked to a sandbox, just to try. Again, triggered the error.

And finally - and I don't even know why i didn't try that earlier - I tried to keep my mdb import in the global app.js - which is basically one of the first JS files to be executed - with window.mdb = mdb in it, to make it global. And in the more specific file - which is one of the latest JS files to be executed - my EcommerceGallery import. Turns out it works, no error riggered whatsoever, which means window.mdb has to be defined before any plugin import.

Last thing I tried, just to make sure, was to put again both imports in the same file but changing the order of instructions.

import * as mdb from 'mdb-ui-kit';
window.mdb = mdb;

import EcommerceGallery from 'mdb-ecommerce-gallery';
window.EcommerceGallery = EcommerceGallery;

And error is triggered again. I don't know if your app's structure allows you to implement it this way, nor do I know if that behaviour was intended by MDB techs.

This'll work for me though.

Also, I answered my question above, why do we need to add mdb as a window object. Just makes things a lot more practical, mdb accessible through the whole app without reimporting it everywhere - which means it's also accessible for any plugin that would need global mdb object. This also means you don't need to make the plugin global aswell if you don't need to access it in a different file from the one you make the import in (window.plugin = plugin isn't mandatory).

Hope my explanation was clear, also hope this helps you David aswell as MDB techs !

David O'Connell free commented 2 years ago

Brilliant! Thanks a mill. I'll give it a shot

Add comment

MyHomeTendance priority answered 2 years ago

1 0 Best answer

I don't know if I should be writing here bu I have the exact same trouble. Installed mdb pro kit with npm, same for th plugin itself. Import * as mdb, then import EcommerceGallery. Mdb is not defined, but when i log it without importing EcommerceGallery i have the same object as above. Any solution by any chance ?

Grzegorz Bujański staff commented 2 years ago

Please try to install the plugin according to this instruction: https://mdbootstrap.com/docs/standard/pro/plugins-installation/ or this tutorial: https://www.youtube.com/watch?v=WROChiPfOTc&ab_channel=Keepcoding

If there are any problems during the installation, describe exactly what stage of the installation they occurred at, send the js and html code you used and send the error that you receive.

Please insert min. 15 characters.

MyHomeTendance priority commented 2 years ago

First thing I tried but tried it again. We never know I might have done it wrong the first time.

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/plugins/prd/ecommerce-gallery

Then in my JS file :

import * as mdb from 'mdb-ui-kit';
import EcommerceGallery from 'mdb-ecommerce-gallery';
window.mdb = mdb;
window.EcommerceGallery  = EcommerceGallery;

For the HTML code i'm purely using the first example of your Ecommerce Gallery documentation. Didn't paste it here because it takes some space but if you want it i'll put it in the next comment. JSs are loaded in head with defer to make sure the dom's loaded before JS is executed.

Then I build with webpack Encore and make sure every file is loaded in the right order.

ecommerce-gallery.min.js:1 Uncaught ReferenceError: mdb is not defined

This error occurs when mdb.Lightbox is instanciated by the gallery.

What's funny is that i've tried out Calendar and VectorMaps just to see if I had the same problem with those, and I don't. Only EcommerceGallery seems to have trouble finding mdb object so far. I can keep trying other plugins to see which ones would cause that error to be triggered.

Other funny thing is, even though I get this Reference Error in my console, the plugin actually seems to be 'working', meaning the carousel does the job, I can switch pictures and all with the pretty animations. Just every time I do that it triggers that very same error again. I dont' like having red in my console.

If this is more confortable, and since I didn't really know if anyone would answer here, I made a new thread for my problem with Symfony webpack Encore and EcommerceGallery. I let you deceide whether you want to keep discussing this here or there.

Last little question, out of curiosity, why is it that we always need to add plugins as window objects ?

First thing I tried but tried it again. We never know I might have done it wrong the first time.

<pre class="prettyprint"><code>npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/plugins/prd/ecommerce-gallery
</code></pre>

Then in my JS file :

<pre class="prettyprint"><code>import * as mdb from 'mdb-ui-kit';
import EcommerceGallery from 'mdb-ecommerce-gallery';
window.mdb = mdb;
window.EcommerceGallery = EcommerceGallery;
</code></pre>

For the HTML code i'm purely using the first example of your Ecommerce Gallery documentation. Didn't paste it here because it takes some space but if you want it i'll put it in the next comment. JSs are loaded in head with defer to make sure the dom's loaded before JS is executed.

Then I build with webpack Encore and make sure every file is loaded in the right order.

<pre class="prettyprint"><code>ecommerce-gallery.min.js:1 Uncaught ReferenceError: mdb is not defined
</code></pre>

This error occurs when mdb.Lightbox is instanciated by the gallery.

What's funny is that i've tried out Calendar and VectorMaps just to see if I had the same problem with those, and I don't. Only EcommerceGallery seems to have trouble finding mdb object so far. I can keep trying other plugins to see which ones would cause that error to be triggered.

Other funny thing is, even though I get this Reference Error in my console, the plugin actually seems to be 'working', meaning the carousel does the job, I can switch pictures and all with the pretty animations. Just every time I do that it triggers that very same error again. I dont' like having red in my console.

If this is more confortable, and since I didn't really know if anyone would answer here, I made a new thread for my problem with Symfony webpack Encore and EcommerceGallery. I let you deceide whether you want to keep discussing this here or <a href="https://mdbootstrap.com/support/standard/mdb-advanced-pro-kit-plugins-import-problem/" target="_blank">there.</a>

Last little question, out of curiosity, why is it that we always need to add plugins as window objects ?

Please insert min. 15 characters.

David O'Connell free commented 2 years ago

I had all of the issues you are describing. I could never resolve it.

MyHomeTendance priority commented 2 years ago

@David O'Connell I actually was hoping you found a solution when posting in this very thread xD I hope we're going to find one eventually. It's completely blocking some of my coworkers here... Had you tried any other plugin aswell ?

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

I just checked if the plugin is corrupted, but it works for me. You can install plugin according to our tutorial: https://www.youtube.com/watch?v=WROChiPfOTc

Make sure that you've installed the plugin correctly. After you've received an access to the plugin repo, create an access token, and use it to install plugin.

Then you shall see mdb-ecommerce-gallery in your package.json file. You will be able to import it. My index.js file looks like:

import * as mdb from 'mdb-ui-kit';
import EcommerceGallery from 'mdb-ecommerce-gallery';

window.mdb = mdb // add lib as a global object
window.EcommerceGallery = EcommerceGallery // add plugin as a global object
export default {
  mdb,
};

Then it works perfectly. By default Wordpress shouldn't interfere this process.

Add comment

David O'Connell free answered 2 years ago

0 0 Best answer

would it make a difference that I am using mdb in Wordpress?

Add comment

David O'Connell free answered 2 years ago

0 0 Best answer

Hi,

I have followed the instructions to install the plugin.

when I remove the ecommerece plugin and console log mdb i get:

<pre class="prettyprint"><code>Alert: (...)
Animate: (...)
Autocomplete: (...)
Button: (...)
Carousel: (...)
Chart: (...)
ChipsInput: (...)
Clipboard: (...)
Collapse: (...)
Datatable: (...)
Datepicker: (...)
Datetimepicker: (...)
Dropdown: (...)
InfiniteScroll: (...)
Input: (...)
LazyLoad: (...)
Lightbox: (...)
Loading: (...)
Modal: (...)
MultiRangeSlider: (...)
Navbar: (...)
Offcanvas: (...)
PerfectScrollbar: (...)
Popconfirm: (...)
Popover: (...)
Range: (...)
Rating: (...)
Ripple: (...)
ScrollSpy: (...)
Select: (...)
Sidenav: (...)
SmoothScroll: (...)
Stepper: (...)
Sticky: (...)
Tab: (...)
Timepicker: (...)
Toast: (...)
Tooltip: (...)
Touch: (...)
Symbol(Symbol.toStringTag): "Module"
__esModule: true
get Alert: ƒ ()
get Animate: ƒ ()
get Autocomplete: ƒ ()
get Button: ƒ ()
get Carousel: ƒ ()
get Chart: ƒ ()
get ChipsInput: ƒ ()
get Clipboard: ƒ ()
get Collapse: ƒ ()
get Datatable: ƒ ()
get Datepicker: ƒ ()
get Datetimepicker: ƒ ()
get Dropdown: ƒ ()
get InfiniteScroll: ƒ ()
get Input: ƒ ()
get LazyLoad: ƒ ()
get Lightbox: ƒ ()
get Loading: ƒ ()
get Modal: ƒ ()
get MultiRangeSlider: ƒ ()
get Navbar: ƒ ()
get Offcanvas: ƒ ()
get PerfectScrollbar: ƒ ()
get Popconfirm: ƒ ()
get Popover: ƒ ()
get Range: ƒ ()
get Rating: ƒ ()
get Ripple: ƒ ()
get ScrollSpy: ƒ ()
get Select: ƒ ()
get Sidenav: ƒ ()
get SmoothScroll: ƒ ()
get Stepper: ƒ ()
get Sticky: ƒ ()
get Tab: ƒ ()
get Timepicker: ƒ ()
get Toast: ƒ ()
get Tooltip: ƒ ()
get Touch: ƒ ()
__proto__: Object
</code></pre>

which looks normal. but when I import the ecommerce gallery I get like so:

<pre class="prettyprint"><code>import * as mdb from './../node_modules/mdb-ui-kit/js/mdb.min';
import EcommerceGallery from '../node_modules/mdb-ecommerce-gallery/js/ecommerce-gallery.min';

window.mdb = mdb // add lib as a global object
window.EcommerceGallery = EcommerceGallery // add plugin as a global object
</code></pre>

I get the same error

Please insert min. 20 characters.

Hi,

I have followed the instructions to install the plugin.

when I remove the ecommerece plugin and console log mdb i get:

Alert: (...)
Animate: (...)
Autocomplete: (...)
Button: (...)
Carousel: (...)
Chart: (...)
ChipsInput: (...)
Clipboard: (...)
Collapse: (...)
Datatable: (...)
Datepicker: (...)
Datetimepicker: (...)
Dropdown: (...)
InfiniteScroll: (...)
Input: (...)
LazyLoad: (...)
Lightbox: (...)
Loading: (...)
Modal: (...)
MultiRangeSlider: (...)
Navbar: (...)
Offcanvas: (...)
PerfectScrollbar: (...)
Popconfirm: (...)
Popover: (...)
Range: (...)
Rating: (...)
Ripple: (...)
ScrollSpy: (...)
Select: (...)
Sidenav: (...)
SmoothScroll: (...)
Stepper: (...)
Sticky: (...)
Tab: (...)
Timepicker: (...)
Toast: (...)
Tooltip: (...)
Touch: (...)
Symbol(Symbol.toStringTag): "Module"
__esModule: true
get Alert: ƒ ()
get Animate: ƒ ()
get Autocomplete: ƒ ()
get Button: ƒ ()
get Carousel: ƒ ()
get Chart: ƒ ()
get ChipsInput: ƒ ()
get Clipboard: ƒ ()
get Collapse: ƒ ()
get Datatable: ƒ ()
get Datepicker: ƒ ()
get Datetimepicker: ƒ ()
get Dropdown: ƒ ()
get InfiniteScroll: ƒ ()
get Input: ƒ ()
get LazyLoad: ƒ ()
get Lightbox: ƒ ()
get Loading: ƒ ()
get Modal: ƒ ()
get MultiRangeSlider: ƒ ()
get Navbar: ƒ ()
get Offcanvas: ƒ ()
get PerfectScrollbar: ƒ ()
get Popconfirm: ƒ ()
get Popover: ƒ ()
get Range: ƒ ()
get Rating: ƒ ()
get Ripple: ƒ ()
get ScrollSpy: ƒ ()
get Select: ƒ ()
get Sidenav: ƒ ()
get SmoothScroll: ƒ ()
get Stepper: ƒ ()
get Sticky: ƒ ()
get Tab: ƒ ()
get Timepicker: ƒ ()
get Toast: ƒ ()
get Tooltip: ƒ ()
get Touch: ƒ ()
__proto__: Object

which looks normal. but when I import the ecommerce gallery I get like so:

import * as mdb from './../node_modules/mdb-ui-kit/js/mdb.min';
import EcommerceGallery from '../node_modules/mdb-ecommerce-gallery/js/ecommerce-gallery.min';

window.mdb = mdb // add lib as a global object
window.EcommerceGallery = EcommerceGallery // add plugin as a global object

I get the same error

David O'Connell free commented 2 years ago

I have also imported it this way and get the same error

import * as mdb from './../node_modules/mdb-ui-kit/js/mdb.min'; import EcommerceGallery from 'mdb-ecommerce-gallery';

window.mdb = mdb // add lib as a global object window.EcommerceGallery = EcommerceGallery // add plugin as a global object

Add comment

David O'Connell free answered 2 years ago

0 0 Best answer

thanks for the quick reply.

i am importing it like this:

  import * as mdb from 'mdb-ui-kit';
import EcommerceGallery from '../node_modules/mdb-ecommerce-gallery/js/ecommerce-gallery.min';

window.mdb = mdb // add lib as a global object
window.EcommerceGallery = EcommerceGallery // add plugin as a global object

Michał Duszak staff commented 2 years ago

Try console.log(mdb); in your script and let's see if it's loaded correctly.

Michał Duszak staff commented 2 years ago

Also see if you have installed the plugin correctly. You can follow our tutorial: https://mdbootstrap.com/docs/standard/pro/plugins-installation/

and you can try to do the import from the docs https://mdbootstrap.com/docs/standard/plugins/ecommerce-gallery/ import EcommerceGallery from 'mdb-ecommerce-gallery';

Add comment

Michał Duszak staff answered 2 years ago

0 1 Best answer

It seems like mdb isn't imported or installed correctly. I would need more info to locate the issue. Try going through our getting started tutorials. https://mdbootstrap.com/docs/standard/getting-started/installation/

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module

Add comment