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

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

Roman pro premium priority asked 12 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="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>

Add comment

Kamila Pieńkowska staff answered 12 months ago

0 0 Best answer

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.

Add comment

Roman pro premium priority answered 12 months ago

0 0 Best answer

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 12 months ago

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

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

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

Roman pro premium priority commented 12 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

Roman

Pro User Premium support

192Support score
19Questions 16Answers

0Snippets likes 3Snippets