Topic: JS error while using local version of mdb.umd.min.js
Hello,I tried to upgrade MDB from version 6 to 7. I have a problem with importing a JS file. The code works fine with mdb.umd.min.js from CDN, but this is only a free version of MDB.
I need to use a PRO version so I downloaded MDB package and include mdb.umd.min.js from local web directory. Both files (PRO and FREE have a comment Version: FREE/PRO 7.1.0). When I open the page I can see this error in a Chrome console:
Uncaught TypeError: Cannot set properties of undefined (setting 'Constructor')
at mdb.umd.min.js?v=1701877659:18:1986
at Dc (mdb.umd.min.js?v=1701877659:18:1787)
at Lc (mdb.umd.min.js?v=1701877659:18:1889)
at ih (mdb.umd.min.js?v=1701877659:18:15757)
at mdb.umd.min.js?v=1701877659:18:16071
at Array.forEach (<anonymous>)
at nb.init (mdb.umd.min.js?v=1701877659:18:16060)
at mdb.umd.min.js?v=1701877659:18:16376
at mdb.umd.min.js?v=1701877659:351:20428
at mdb.umd.min.js?v=1701877659:1:178
How can I use a PRO version of mdb.umd.min.js? Thank you for your help
Code below works fine
<head>
(...)
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.1.0/mdb.umd.min.js" defer></script>
(...)
</head>
Code below does not work
<head>
(...)
<script src="/system/mdb/js/mdb.umd.min.js" defer></script>
(...)
</head>
The whole page here:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Ambulari</title>
<link rel="stylesheet" media="screen" href="/system/mdb/css/mdb.pro-web.css?v=1701962091">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/solid.min.css" integrity="sha512-tk4nGrLxft4l30r9ETuejLU0a3d7LwMzj0eXjzc16JQj+5U1IeVoCuGLObRDc3+eQMUcEQY1RIDPGvuA7SNQ2w==" crossorigin="anonymous">
<link rel="icon" type="image/png" sizes="16x16" href="/images/icon_web_16w.png?v=1619027860">
<link rel="icon" type="image/png" sizes="32x32" href="/images/icon_web_32w.png?v=1619027860">
<link rel="icon" type="image/png" sizes="192x192" href="/images/icon_web_192w.png?v=1619027860">
<link rel="icon" type="image/png" sizes="256x256" href="/images/icon_web_256w.png?v=1619027860">
<link rel="apple-touch-icon" sizes="180x180" href="/images/icon_web_180w.png?v=1619027860">
<link rel="manifest" href="https://mdbcdn.b-cdn.net/site.webmanifest">
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrity="sha256-x3YZWtRjM8bJqf48dFAv/qmgL68SI4jqNWeSLMZaMGA=" crossorigin="anonymous" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="https://kit.fontawesome.com/17e7699ccd.js" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="/system/mdb/js/mdb.umd.min.js?v=1701877659" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" type="text/javascript">
function initMap() {}
</script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIf9vL7Yz5i_6QyU6ay6XNLsNR-29KpRw&callback=initMap" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="https://unpkg.com/naja@2/dist/Naja.min.js" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="/system/keydragzoom/js/keydragzoom.js?v=1586980454" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="/system/live-form-validation/js/live-form-validation.js?v=1614531990" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="/system/mdb-addons/js/mdb-file-upload.min.js?v=1633434802" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="https://www.googletagmanager.com/gtag/js?id=G-9F1DS4Y015" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="/system/js/main-web.min.js?v=1701963333"></script>
</head>
<body>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="https://www.google.com/recaptcha/api.js?render=explicit" defer></script>
<script nonce="p7RXW9fR8JNhSOaUSMagNA==" src="/system/recaptcha/js/invisibleRecaptcha.js?v=1614530835" defer></script>
</body>
</html>
Kamila Pieńkowska staff answered a year ago
The problem is that you import JS in the head
of the HTML file. You should do that at the end of the body
tag.
Roman pro premium priority answered a year ago
Thank you. I have reorganized my code, but the problem remains. I realized the problem could be in using MDB and jQuery. The code below doesn't work.
<!DOCTYPE html>
<html lang="cs">
<head>
<link rel="stylesheet" media="screen" href="/system/mdb/css/mdb.pro-web.css">
</head>
<body>
<div class="navbar" data-mdb-navbar-init>
</div>
<script n:nonce src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous"></script>
<script n:nonce src="/system/mdb/js/mdb.umd.min.js"></script>
</body>
</html>
I can still see this error
Uncaught TypeError: Cannot set properties of undefined (setting 'Constructor')
When I remove data-mdb-navbar-init
or jquery.min.js
the error disappears. But I need jQuery for other modules on a page. Can you reproduce it?
Kamila Pieńkowska staff commented a year ago
Why do you need data-mdb-navbar-init
?
Kamila Pieńkowska staff commented a year ago
If you use a simple navbar similar to the examples from the link below it should be removed. https://mdbootstrap.com/docs/standard/navigation/navbar/
Roman pro premium priority commented a year ago
Thank you, I will try. I added data-mdb-navbar-init because of a recommendation "Navbar - add data-mdb-navbar-init to .navbar" at https://mdbootstrap.com/docs/standard/getting-started/migration-guide/
Kamila Pieńkowska staff commented a year ago
I understand but it was in the Pro
section. It does not apply to your use case.
Roman pro premium priority commented a year ago
Thank you, I removed data-mdb-navbar-init
and everything works. But I still don't understand where it is need to use data-mdb-navbar-init
. Even a Google search for "data-mdb-navbar-init" yields nothing. Never mind, I was just wondering.
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.1.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No