Uncaught ReferenceError: mdb is not defined at ecommerce-g

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 ?

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

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

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

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 !

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

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

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

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

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

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.

@SKONSOFT I think your questions have been aswered above

@Grzegorz Bujański said:

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.