Uncaught ReferenceError: mdb is not defined at ecommerce-g


Topic: Uncaught ReferenceError: mdb is not defined at ecommerce-gallery.js:323

David O'Connell pro premium priority asked 5 months ago

I am getting a console error when I load up the eCommerce gallery

Uncaught ReferenceError: mdb is not defined
at ecommerce-gallery.js:323

chrome tools shows the issue to be here:

EventHandler.on(document, 'click', LIGTHTBOX_SELECTOR, mdb.Lightbox.toggle());

MyHomeTendance pro premium priority answered 2 months ago

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 pro premium priority commented 2 months ago

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


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

David O'Connell pro premium priority answered 5 months ago

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 commented 5 months ago

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


Michał Duszak commented 5 months 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';


David O'Connell pro premium priority answered 5 months ago

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 pro premium priority commented 5 months 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


David O'Connell pro premium priority answered 5 months ago

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


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.


MyHomeTendance pro premium priority answered 2 months ago

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 months 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.


MyHomeTendance pro premium priority commented 2 months 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 ?


David O'Connell pro premium priority commented 2 months ago

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


MyHomeTendance pro premium priority commented 2 months 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 ?


Grzegorz Bujański staff answered 2 months ago

@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 pro premium priority commented 2 months 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.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.1
  • Device: all
  • Browser: chrome, firefox
  • OS: macOS, windows
  • Provided sample code: No
  • Provided link: No
Tags
mdb