Topic: Problem with jquery after migration to V7.2.0 and UMD format

efilippi priority asked 4 months ago


Hello,

I use the Cropper.js v1.6.1 tool to crop profile image before upload. Cropper js uses jquery.

Before migrating to V7.2.0 UMD it worked well

After migrating to V7.2.0 UMD, I get an error in the browser console :

    Uncaught TypeError: can't access property "Constructor", e.fn[i] is undefined
    b index.js:254
    m index.js:229
    b index.js:246
    St init.js:46
    IC init.js:80
    IC init.js:80
    IC init.js:103
    <anonymous> mdb.pro.umd.js:49
    <anonymous> mdb.umd.min.js:20
    <anonymous> mdb.umd.min.js:20
index.js:254:6
    b index.js:254
    (Asynchrone : EventListener.handleEvent)
    m index.js:229
    b index.js:246
    St init.js:46
    IC init.js:80
    forEach self-hosted:203
    IC init.js:80
    IC init.js:103
    <anonyme> mdb.pro.umd.js:49
    <anonyme> mdb.umd.min.js:20
    <anonyme> mdb.umd.min.js:20

jquery is loaded before mdb js files

I tried to skip the jquery loading => problem disappears

I tried to load the jquery after mdb js files => problem still there

Please help me.

Eric.


Grzegorz Bujański staff commented 4 months ago

How can we reproduce this error? I created a clean project in which I added MDB, jQ and cropper, but this error does not appear.


efilippi priority commented 4 months ago

After some investigation, I could isolate the component that produces the error : it's somewhere in the nav node.

I put it in the snippet : [https://mdbootstrap.com/snippets/standard/efilippi/6030075](https://mdbootstrap.com/snippets/standard/efilippi/6030075)

In the snippet, I just put the nav node, and the problem appears.

In my site, I just removed this nav node (and children), and the probleme disappeared.


efilippi priority answered 3 months ago


I need the data-mdb-navbar-init for my sidenav. If I remove it, the sidenav don't show anymore.

Furthermore, even if remove the data-mdb-navbar-init, I still have the error message on my web site.

Do you want me to give you access to my test site so you can see the source code and the console ? It's protected by .htaccess but I can give you access on private message.


Grzegorz Bujański staff commented 3 months ago

Unfortunately, this will not be enough. On the website, your code will likely be minified, and debugging it will be difficult. It would be easiest if you created a snippet in which this error would be visible. Sidenav itself is not dependent on the data-mdb-navbar-init attribute. This attribute is used to init the navbar only. I created a snippet that consists of a navbar and sidenav. I added jQ to it and I see that the error does not occur: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/6035377#html-tab-view Can you modify this snippet to include the error that occurs on your website or create your own?


Grzegorz Bujański staff answered 3 months ago


Thanks for reporting. It looks like this is a problem with our component. Removing jQ from the snippet you sent doesn't solve the problem, but removing data-mdb-navbar-init does. We will try to fix it as quickly as possible. Did you add this data attribute intentionally? Do you need a regular navbar or do you want to make a navbar with scroll animation?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.2.0
  • Device: laptop
  • Browser: firefox, chrome
  • OS: Linux debian
  • Provided sample code: No
  • Provided link: No