JS error while using local version of mdb.umd.min.js

Topic: JS error while using local version of mdb.umd.min.js

Roman priority asked 1 year 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>

Add comment

Roman priority answered 1 year ago

0 0 Best answer

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

<p>I can still see this error</p>

<pre class="prettyprint"><code>Uncaught TypeError: Cannot set properties of undefined (setting 'Constructor')
</code></pre>

<p>When I remove <code>data-mdb-navbar-init</code> or <code>jquery.min.js</code> the error disappears. But I need jQuery for other modules on a page. Can you reproduce it?</p>

Please insert min. 20 characters.

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 1 year ago

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

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

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

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

Add comment

Kamila Pieńkowska staff answered 1 year ago