1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: JS error while using local version of mdb.umd.min.js

Roman priority asked 4 months ago

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="/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>

Roman priority answered 4 months 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 4 months ago

Why do you need data-mdb-navbar-init?

Kamila Pieńkowska staff commented 4 months 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 priority commented 4 months 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 4 months ago

I understand but it was in the Pro section. It does not apply to your use case.

Roman priority commented 4 months 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.

Kamila Pieńkowska staff answered 4 months 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.

Write
Create snippet
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.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
js pro-version console-error
About author
Roman
192Support score
19Questions 16Answers 3Snippets