Topic: Unable to load Datepicker via UMD

unikladmin priority asked 3 months ago


Expected behavior

Pro component (in this case, Datepicker) should load

Actual behavior

Error displayed: Cannot use import statement outside a module

Resources (screenshots, code snippets etc.)enter image description here


Kamila Pieńkowska staff answered 3 months ago


Here is example on how to import mdb package:

<script type="module">
  // MDB import
  import * as mdb from '/src/js/mdb.pro.umd.js';
</script>

Kamila Pieńkowska staff commented 3 months ago

Of course you need to change path according to your use case.


unikladmin priority commented 3 months ago

This is the code:

    <!-- MDB -->
    <script type="text/javascript" src="/UmsWeb/js/mdb.min.js"></script>

    <!-- MDB ESSENTIAL -->
    <script type="text/javascript" src="/UmsWeb/js/mdb.umd.min.js"></script>
    <!-- MDB PLUGINS -->
    <script type="text/javascript" src="/UmsWeb/plugins/js/all.min.js"></script>    

    <script type="module">
        import * as mdb from '/UmsWeb/src/mdb/js/mdb.pro.umd.js';
    </script>

However, I'm getting another error:

GET https://.../UmsWeb/src/mdb/js/bootstrap/mdb-prefix/offcanvas net::ERR_ABORTED 404 (Not Found)


Kamila Pieńkowska staff commented 3 months ago

If you have this: <!-- MDB ESSENTIAL --> <script type="text/javascript" src="/UmsWeb/js/mdb.umd.min.js"></script>

You've allready imported MDB package. There is no need to add:

import * as mdb from '/UmsWeb/src/mdb/js/mdb.pro.umd.js';


Kamila Pieńkowska staff commented 3 months ago

I did not catch this in the screen you provided in the main question, sorry.


unikladmin priority commented 3 months ago

Thanks a lot! It works now


Kamila Pieńkowska staff answered 3 months ago


You need to add type="module" to your script tag.


unikladmin priority commented 3 months ago

Now I got another error: Uncaught TypeError: Failed to resolve module specifier "mdb-ui-kit". Relative references must start with either "/", "./", or "../".



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.2.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No