Unable to load Datepicker via UMD

Topic: Unable to load Datepicker via UMD

unikladmin priority asked 1 week 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

Add comment

Kamila Pieńkowska staff answered 1 week ago

0 0 Best answer

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

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

unikladmin priority commented 1 week 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)

Please insert min. 15 characters.

Kamila Pieńkowska staff commented 1 week ago

If you have this:  <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 1 week ago

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

unikladmin priority commented 1 week ago

Thanks a lot! It works now

Add comment

Kamila Pieńkowska staff answered 1 week ago

0 0 Best answer

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

unikladmin priority commented 1 week ago

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

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

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

unikladmin

0Support score
4Questions 0Answers 0Snippets