Topic: Problem with jquery after migration to V7.2.0 and UMD format
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.
Did you add this data attribute intentionally?
I followed the instructions on this page : https://mdbootstrap.com/docs/standard/getting-started/migration-guide/ :
Navbar - add data-mdb-navbar-init to .navbar.
Do you need a regular navbar or do you want to make a navbar with scroll animation?
I use regular navbar with sticky option on large screens, and sidenav with crolling option on small devices.
Did you fix the problem ?
Thank you
Eric
Kamila Pieńkowska staff commented 2 months ago
You probably do not need data-mdb-navbar-init.
This is the only type of navbar that needs this attribute: https://mdbootstrap.com/docs/standard/navigation/headers/#section-animated-navbar
efilippi pro premium priority commented 2 months ago
Yes, greta, the doc did'nt mentioned it.
I removed this attribute and performed a couple of tests and it's OK, the error message disappeared.
Thanks !
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?
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 8 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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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
Grzegorz Bujański staff commented 8 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 pro premium priority commented 8 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.